จริงๆ แล้ว แบบอักษรของซานฟรานซิสโกจัดส่งเป็นแบบอักษรตัวแปร PlatoBlockchain Data Intelligence ค้นหาแนวตั้ง AI.

อันที่จริงแบบอักษรซานฟรานซิสโกนั้นจัดส่งเป็นฟอนต์แบบแปรผัน

Apple เปิดตัว ฟอนต์ระบบ San Francisco เวอร์ชันขยายที่ WWDC 2022 จากนั้น เมื่อเดือนที่แล้ว จิม นีลเส็นเน้นไปที่รูปแบบต่างๆ ของฟอนต์ อธิบาย วิธีที่แบบอักษรให้สเปกตรัมของรูปแบบต่างๆ ตาม ความกว้าง และ น้ำหนัก. เป็นที่น่าอ่านถ้าคุณยังไม่ได้ตรวจสอบ

อันที่จริงแบบอักษรซานฟรานซิสโกนั้นจัดส่งเป็นฟอนต์แบบแปรผัน

ด้วยตัวเลือกใหม่ที่ยอดเยี่ยมเหล่านี้ คุณอาจอยากใช้ตัวเลือกเหล่านี้ในการออกแบบเว็บ คริสเป็น มองดูฉากที่ขยายออกไปเช่นกัน บนบล็อกส่วนตัวของเขาและไตร่ตรอง:

แต่ยังไม่ชัดเจนว่าเราจะใช้ประโยชน์จาก CSS แบบย่อ บีบอัด และขยายได้อย่างไร หรือมีแผนที่จะอนุญาต ฉันคิดว่าเราสามารถมองไปรอบๆ Apple.com ได้ในที่สุด และดูว่าพวกเขาทำอย่างไรหากพวกเขาเริ่มใช้งานที่นั่น

สิ่งนี้ไม่สมเหตุสมผลหรือไม่ที่จะสร้างเป็นฟอนต์แบบแปรผันและจัดส่งทั้งชุดและคาบูเดิ้ลด้วยวิธีนี้

ปรากฎว่าใช่ มันสมเหตุสมผลดี คริสติดตามใน โพสต์ใหม่:

แต่เมื่อวานบังเอิญไปเจอมาว่า ฟอนต์ San Francisco ในตัว (บนอุปกรณ์ Apple ที่มีฟอนต์ในตัว) เป็นตัวแปรอยู่แล้ว (!!) เห็นไหม ฉันเคยเป็น ปั่นป่วนด้วย Roboto Flexและมี system-ui เป็นฟอนต์สำรอง และผมสังเกตว่าในช่วง FOUT นั้น font-variation-settings ฉันใช้มีผลกับแบบอักษรทางเลือก ซึ่งแสดงเป็นซานฟรานซิสโกบน Mac ของฉัน ซึ่ง… เว้นแต่ว่าฉันงี่เง่า… หมายความว่าซานฟรานซิสโกเป็นแบบอักษรที่ปรับเปลี่ยนได้

แล้วการใช้งานล่ะ? Chris มีการสาธิตแน่นอน:

มี gotchas บางส่วนสำหรับสิ่งนี้ ทางเลือกที่สำคัญที่สุดสำหรับอุปกรณ์ที่ไม่ใช่ของ Apple หลังจากที่ทุกการสาธิตนั้นเพียงแค่โทร system-ui สำหรับตระกูลฟอนต์ — ไม่ได้บอกให้เบราว์เซอร์ดาวน์โหลดไฟล์ฟอนต์หรืออะไรทั้งสิ้น และใครจะรู้ว่า Apple จะจัดส่งไฟล์ฟอนต์แบบแปรผันหรือไม่ เราสามารถใช้เป็นฟอนต์เว็บที่กำหนดเองได้จริง

สิ่งที่น่าสนใจอื่น ๆ ? คริสทำบางอย่างและนับ 35 เลย์เอาต์ที่รวมอยู่ในแบบอักษรของระบบนั้น ไป อ่านส่วนที่เหลือของโพสต์ เพื่อดูพวกเขาทั้งหมด (และเพื่อให้ได้ปริมาณที่ดีของ Chris-isms — ฉันรู้ว่าฉันคิดถึงพวกเขา!)


ลิงค์ตรง →

ประทับเวลา:

เพิ่มเติมจาก เคล็ดลับ CSS