ความลับเบื้องหลังฟอนต์ San Francisco ใหม่ของ Apple การใช้ฟอนต์อินเทอร์เฟซของระบบในการออกแบบเว็บ

เฮลเวติกา (ซ้าย), ซานฟรานซิสโก (ขวา)

ฟอนต์ San Francisco ถูกใช้บน Apple Watch แล้ว และกลายเป็นฟอนต์เริ่มต้นสำหรับอุปกรณ์ Apple: Apple Watch, iPhone, iPad และ Mac

แอปเปิ้ลวอทช์

Apple ใช้ Helvetica เป็นแบบอักษรของระบบสำหรับ iOS ตั้งแต่ iPhone เครื่องแรก และบน Mac OS X พวกเขาเปลี่ยนฟอนต์จาก Lucida Grande เป็น Helvetica ตั้งแต่ปล่อย 10.10 Yosemite เหตุใด Apple จึงตัดสินใจฝัง Helvetica ซึ่งเป็นแบบอักษรที่มีชื่อเสียงและเป็นที่ชื่นชอบมากที่สุดในโลก

ในรูปแบบขนาดเล็ก Helvetica อ่อนแอ

พวกเขาพูดอย่างนั้น Helvetica ไม่เหมาะสำหรับข้อความที่มีขนาดเล็ก. เมื่อแบบอักษรของระบบใน Mac OS X Yosemite เปลี่ยนเป็น Helvetica นักออกแบบหลายคนกล่าวว่าแบบอักษรดังกล่าวไม่เหมาะสมเลยที่นี่

"Helvetica ห่วยแตก" โดย Erik Spiekermann

เมื่อคุณพิมพ์ข้อความในขนาดที่เล็ก ความชัดเจนที่ไม่ดีของ Helvetica จะปรากฏให้เห็น เฮลเวติกาเบลอข้อความดังกล่าว ข้อความบางส่วนสับสนและยากที่จะแยกแยะ หลายคนบอกว่า Apple สร้างฟอนต์ San Francisco เพื่อทำให้ข้อความขนาดเล็กบน Apple Watch อ่านง่ายขึ้น

ตัวอักษรผสมกันในข้อความขนาดเล็ก

แต่ทุกวันนี้ ความละเอียดหน้าจอของอุปกรณ์มีมากกว่าความละเอียดของสิ่งพิมพ์ และข้อความบน iPhone ก็ไม่ได้เล็กเท่ากับบน Apple Watch เสมอไป เหตุใด Apple จึงเปลี่ยนแบบอักษรของระบบไม่เพียง แต่ใน Apple Watch เท่านั้น แต่ยังรวมถึงใน iOS และ Mac OS X ด้วย

ซานฟรานซิสโกไม่ได้เป็นเพียงแบบอักษรเดียว

ฟอนต์ San Francisco มีคุณสมบัติมากมายที่ทำให้อ่านง่าย ในความเป็นจริง แบบอักษร San Francisco สำหรับ Apple Watch และสำหรับ iOS/Mac เป็นแบบอักษรสองแบบที่มีความแตกต่างเล็กน้อย.

ตระกูลแบบอักษรที่เรียกว่า "SF" ใช้สำหรับ iOS/Mac และ "SF Compact" สำหรับ Apple Watch คุณสามารถสังเกตเห็นความแตกต่างของตัวอักษรที่โค้งมน o, e "SF กะทัดรัด" มีเส้นแนวตั้งที่เรียบกว่า SF

SF และ SF คอมแพค

ความแตกต่างนี้ทำให้ข้อความใน SF Compact มีระยะขอบ (การเยื้อง) ระหว่างตัวอักษรมากขึ้น ทำให้อ่านง่ายขึ้นบนอุปกรณ์ขนาดเล็ก เช่น Apple Watch

นอกจากนี้ แบบอักษร SF และ SF Compact ยังแบ่งออกเป็นสองตระกูลย่อย: "Text" และ "Display" นี่คือสิ่งที่ Apple เรียกว่า "ขนาดออปติคัล" "ข้อความ" สำหรับข้อความในขนาดที่เล็กกว่า และ "แสดง" สำหรับข้อความในขนาดที่ใหญ่ขึ้น

ครอบครัวซานฟรานซิสโก

ดังที่ฉันได้กล่าวไว้ข้างต้น เมื่อใช้แบบอักษรพิลึก (sans-serif) เช่น Helvetica ตัวอักษรสองตัวที่อยู่ติดกัน "blend" และตัวอักษรเช่น "a", "c", "s" จะดูคล้ายกันในขนาดที่เล็ก

แบบอักษร "แสดง" และ "ข้อความ"

ตระกูลย่อย "Text" มีระยะขอบมากกว่าตระกูลย่อย "Display" และรูรับแสงของฟอนต์ข้อความเหล่านี้ก็กว้างขึ้นด้วย ดังนั้นขนาดพอยต์ที่เล็กจึงอ่านได้ชัดเจนยิ่งขึ้น

ฟอนต์ San Francisco เป็นไดนามิก

สิ่งที่ดีที่สุดอย่างหนึ่งเกี่ยวกับซานฟรานซิสโกคือการปรับแบบอักษรให้เหมาะสมแบบไดนามิก ระบบจะสลับแบบอักษรที่แสดง/ข้อความโดยอัตโนมัติขึ้นอยู่กับขนาดข้อความ ค่าเกณฑ์คือ 20pt

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

สิ่งที่ทำให้ฉันประหลาดใจเกี่ยวกับฟอนต์ San Francisco คือการแสดงโคลอน โดยพื้นฐานแล้ว เครื่องหมายทวิภาคจะถูกวางไว้เหนือเส้นประเภทโดยตรง ดังนั้นจึงไม่ได้อยู่กึ่งกลางแนวตั้งหากอยู่ระหว่างตัวเลข และในฟอนต์ซานฟรานซิสโก ทวิภาคจะจัดแนวโดยอัตโนมัติ

ลำไส้ใหญ่ตรงกลางแนวตั้ง

ซานฟรานซิสโกเป็นแบบอักษรสำหรับยุคดิจิทัล

อย่างที่คุณเห็น ฟอนต์ซานฟรานซิสโกได้รับการคิดอย่างรอบคอบเพื่อให้อ่านง่ายในทุกขนาดและบนทุกอุปกรณ์

Helvetica ซึ่งถูกแทนที่ด้วยฟอนต์ San Francisco ถูกสร้างขึ้นในสวิตเซอร์แลนด์ในปี 1957 เมื่อยังไม่มี อุปกรณ์ดิจิทัล. Helvetica ถูกใช้อย่างแพร่หลายในฐานะฟอนต์ขององค์กรโดยหลายๆ บริษัทในปัจจุบัน และไม่ต้องสงสัยเลยว่าฟอนต์นี้จะยังคงถูกใช้เป็นฟอนต์คลาสสิกที่มีคุณภาพต่อไปในอนาคต

ในทางกลับกัน ซานฟรานซิสโกเป็นฟอนต์สมัยใหม่ มันเปลี่ยนสไตล์แบบไดนามิกตามบริบท นี่คือสิ่งที่เหมือนกับแบบอักษร "เนทีฟ" ราวกับว่าสร้างขึ้นเป็นพิเศษสำหรับยุคดิจิทัลที่กำลังจะมาถึง

San Francisco เป็นฟอนต์จาก Apple ซึ่งเปิดตัวต่อผู้ชมเป็นครั้งแรกเมื่อปลายปี 2014 ก่อนหน้านั้น บริษัทใช้แบบอักษร " " ซึ่งตามที่ Apple มี ด้านที่อ่อนแอเนื่องจากข้อความขนาดเล็กอ่านยาก

ตอนนี้สายผลิตภัณฑ์ทั้งหมดของ Apple มีความมั่นใจในตัวเอง แบบอักษรของตัวเอง"ซานฟรานซิสโก" ซึ่งคุณสามารถดาวน์โหลดได้ฟรีภายใต้บทความนี้ ครอบครัว "ซานฟรานซิสโก" แบ่งออกเป็นสองครอบครัวย่อย ได้แก่ "ข้อความ" และ "ดิสเพลย์" ความแตกต่างคือระยะห่างตัวอักษรที่มากขึ้นในตัวเลือกแรก คุณลักษณะนี้ช่วยให้ตระกูลย่อยสามารถอ่านแบบอักษรขนาดเล็กได้ดีที่สุด และเป็นแบบอักษรนี้ที่ใช้กับอุปกรณ์ขนาดเล็กจากบริษัทอย่าง iWatch

รองรับ Cyrillic (รัสเซีย) รวมถึงภาษาอังกฤษอย่างไม่ต้องสงสัย

ดาวน์โหลดฟอนต์ "ซานฟรานซิสโก" ฟรี

ไฟล์เก็บถาวรซึ่งคุณสามารถดาวน์โหลดได้ในตอนท้ายของบทความประกอบด้วย 21 สไตล์ (เกือบครึ่งหนึ่งสำหรับแต่ละตระกูลย่อย) ในสามรูปแบบที่แตกต่างกัน

อนุวงศ์” ข้อความ" - นี่คือ: ตัวหนา, ตัวหนา ตัวเอียง, หนัก, ตัวเอียงหนัก, ตัวเอียง, แสงสว่าง, ตัวเอียงเบา, ปานกลาง, ตัวเอียงปานกลาง, ปกติ, กึ่งตัวหนาและ ตัวเอียงกึ่งตัวหนา.

ในทางกลับกันอนุวงศ์ แสดง' เป็นโครงร่าง: สีดำ, ตัวหนา, หนัก, แสงสว่าง, ปานกลาง, ปกติ, กึ่งตัวหนา, บางและ เบาเป็นพิเศษ.

บันทึกฟอนต์นั้นได้รับอนุญาตจาก Apple ซึ่งหมายความว่าคุณมีสิทธิ์ใช้ฟอนต์นั้นในการพัฒนา ซอฟต์แวร์ไปยังผลิตภัณฑ์ของ Apple ตลอดจนภาพหน้าจอของผลิตภัณฑ์ที่คล้ายคลึงกัน

จำไว้และขอให้โชคดีกับความคิดสร้างสรรค์ของคุณ!

Apple ใช้ชุดฟอนต์ Helvetica เป็นฟอนต์ระบบสำหรับ iOS ตั้งแต่เปิดตัว iPhone รุ่นแรก พวกเขายังแทนที่ Lucida Grande ใน Mac OS X โดยเริ่มจากเวอร์ชัน 10.10 Yosemite เหตุใด Apple จึงตัดสินใจเลิกใช้ฟอนต์ที่เป็นที่ชื่นชอบมากที่สุดในโลก

iOS 9 พร้อมใช้งานอย่างเป็นทางการสำหรับทุกคนแล้ว และตระกูลฟอนต์ใหม่ที่ชื่อว่า San Francisco ได้เข้ามาแทนที่ Helvetica Neue อย่างละเอียด

เฮลเวติกา (ซ้าย) และซานฟรานซิสโก (ขวา)

เมื่อถึงจุดนี้ พวกมันถูกใช้ใน Apple Watch แล้ว ตอนนี้ San Francisco ได้กลายเป็นฟอนต์มาตรฐานเดียวสำหรับผลิตภัณฑ์แพลตฟอร์มทั้งหมด: Apple Watch, iPhone, iPad และ Mac

Apple ใช้ตระกูล Helvetica เป็นฟอนต์ระบบสำหรับ iOS ตั้งแต่เปิดตัว iPhone รุ่นแรก พวกเขายังแทนที่ Lucida Grande ใน Mac OS X โดยเริ่มจากเวอร์ชัน 10.10 Yosemite เหตุใด Apple จึงตัดสินใจเลิกใช้ฟอนต์ที่เป็นที่ชื่นชอบมากที่สุดในโลก

ขนาดที่เล็กคือจุดอ่อนของเฮลเวติกา

มีความเห็นว่า Helvetica ไม่เหมาะสำหรับขนาดตัวอักษรขนาดเล็ก เมื่อ Helvetica แทนที่ตระกูลก่อนหน้าใน Mac OS X Yosemite นักออกแบบหลายคนพบว่าการแทนที่นี้ไม่เหมาะสม

"Helvetica แย่มาก" จากบล็อกของ Erik Spiekermann

คุณสามารถตรวจสอบการอ่านต่ำของ Helvetica ได้ดังต่อไปนี้ พิมพ์ข้อความขนาดเล็กและเบลอ ในขณะเดียวกันชิ้นส่วนบางส่วนก็ "ผสม" เพื่อให้แยกวิเคราะห์เนื้อหาได้ยาก Apple ได้รับการกล่าวขานว่าออกแบบตระกูล San Francisco เพื่อทำให้ข้อความขนาดเล็กบน Apple Watch อ่านง่ายขึ้น

อย่างไรก็ตาม ความละเอียดของอุปกรณ์อัจฉริยะที่ทันสมัยมีมากกว่าความละเอียด ฉบับพิมพ์และข้อความบน iPhone ก็ไม่ได้เล็กเท่ากับบน Apple Watch เสมอไป เหตุใด Apple จึงไม่เพียงแทนที่ Apple Watch แต่ยังรวมถึง iOS และ Mac OS X ด้วย

ซานฟรานซิสโก - หลากหลาย

ฟอนต์ San Francisco มีคุณสมบัติมากมายที่ทำให้อ่านง่าย อันที่จริง เวอร์ชันซานฟรานซิสโกสำหรับ Apple Watch และเวอร์ชัน iOS/Mac เป็นแบบอักษรสองแบบที่แตกต่างกัน

ตระกูลแบบอักษรที่เรียกว่า “SF” ใช้สำหรับ iOS/Mac ในขณะที่ “SF Compact” ใช้สำหรับ Apple Watch คุณสามารถเห็นความแตกต่างด้วยตัวอักษรโค้งมน เช่น 'o' และ 'e' เส้นแนวตั้งใน SF Compact นั้นเรียบกว่าใน SF

ความแตกต่างนี้ทำให้ข้อความที่พิมพ์ด้วย SF Compact มีการเยื้องระหว่างอักขระมากขึ้น ส่งผลให้ข้อความอ่านง่ายขึ้นเมื่ออ่านบนอุปกรณ์ขนาดเล็ก เช่น Apple Watch

นอกจากนี้ แต่ละตระกูลยังแบ่งย่อยออกเป็นอีกสองตระกูลย่อย ได้แก่ "ข้อความ" และ "ดิสเพลย์" Apple เรียกว่า "Optical Sizes" ตระกูลย่อยของ Text ใช้สำหรับขนาดข้อความขนาดเล็ก ในขณะที่ตระกูลย่อย Display ใช้สำหรับขนาดข้อความขนาดใหญ่

ตระกูลฟอนต์ซานฟรานซิสโก

ตามที่กล่าวไว้ข้างต้น ในฟอนต์ sans serif (หรือ sans serif) เช่น Helvetica ตัวอักษรสองตัวที่อยู่ติดกัน "blend" และตัวอักษร เช่น 'a', 'e', ​​'s' กลายเป็น very เพื่อนที่คล้ายกันทับกันในขนาดตัวอักษรขนาดเล็ก

การเปรียบเทียบการเยื้องระหว่างอักขระในแบบอักษรของตระกูลย่อย Display และ Text

การเปรียบเทียบแบบอักษรของตระกูลย่อย Display และ Text ในตัวอย่างของอักขระตัวเดียว

ในขณะเดียวกัน ตระกูลย่อยของ Text ก็คิดในลักษณะที่การเยื้องระหว่างอักขระในนั้นเพิ่มขึ้นเมื่อเทียบกับอักขระของตระกูลย่อย Display และช่องว่างในพวกมันจะถูกขยายเพื่อปรับปรุงการอ่านที่ขนาดตัวอักษรขนาดเล็ก

ซานฟรานซิสโกไม่หยุดนิ่ง

สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับซานฟรานซิสโกคือชุดหูฟังได้รับการปรับแต่งแบบไดนามิก การแสดงผลและข้อความแทนที่กันตามขนาดของข้อความที่แสดง เกณฑ์ที่นี่คือ 20pt

นักออกแบบและวิศวกรไม่ต้องกังวลกับการเลือกตัวเลือกที่เหมาะสมจากครอบครัว เราเพิ่งเพิ่มแบบอักษรของระบบใน UILabel เป็นต้น ระบบจะกำหนดว่าคุณต้องการหูฟังแบบใด

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

จัดแนวโคลอนอัตโนมัติให้อยู่กึ่งกลางแนวตั้ง

ซานฟรานซิสโกมาหาเราจากยุคดิจิทัล

อย่างที่คุณเห็น ฟอนต์ San Francisco ได้รับการออกแบบและออกแบบให้อ่านง่ายสำหรับข้อความทุกขนาดและบนทุกอุปกรณ์

Helvetica ซึ่งมาแทนที่นั้นถูกสร้างขึ้นในสวิตเซอร์แลนด์ในปี 1957 เมื่อยังไม่มีอุปกรณ์ดิจิทัล อย่างไรก็ตาม หลายบริษัทยังคงใช้ฟอนต์นี้เป็นฟอนต์ขององค์กร และไม่ต้องสงสัยเลยว่าจะยังคงใช้เป็นฟอนต์คลาสสิกที่ดีต่อไปในอนาคต

ในทางกลับกัน ซานฟรานซิสโกเป็นแบบอักษรสมัยใหม่ แบบอักษรของเขาเปลี่ยนแบบไดนามิกตามบริบท เรียกได้ว่าเป็น "Native Font" ชนิดหนึ่งของยุคดิจิทัล

ตอนนี้อาจเป็นครั้งแรกนับตั้งแต่ Macintosh เครื่องแรก เป็นเรื่องสมเหตุสมผลที่จะสนใจใช้แบบอักษรของระบบสำหรับอินเทอร์เฟซ พวกมันเป็นทางเลือกที่น่าสนใจและสดใหม่สำหรับการพิมพ์บนเว็บ - และพวกมันไม่ต้องการการโฮสต์บนเซิร์ฟเวอร์ของคุณหรือบนบุคคลที่สาม จะใช้แบบอักษรของระบบบนเว็บไซต์ได้อย่างไร และปัญหาใดที่อาจเกิดขึ้นที่นี่

ที่ ปีที่แล้วมีแบบอักษรของระบบที่น่าสนใจมากมายสำหรับอินเทอร์เฟซ Google เปิดตัว โรบอท(และยังคงพัฒนาฟอนต์ด้วยการอัพเดทอย่างสม่ำเสมอ) Apple เปิดตัว San Francisco และผู้ออกแบบ Eric Spiekerman ได้สร้างฟอนต์ Fira Sans สำหรับ Mozilla และนั่นไม่ใช่ทั้งหมด อย่าลืมเกี่ยวกับ Microsoft พวกเขาเป็นผู้เริ่มเทรนด์นี้ด้วยการปล่อย วินโดวส์โฟนด้วยภาษาการออกแบบของ Metro ที่เชื่อมโยงอย่างมากกับการพิมพ์ทั่วไปและโดยเฉพาะอย่างยิ่ง Segoe

ไม่แปลกใจเลยที่แนวคิดในการใช้ฟอนต์เหล่านี้บนเว็บกำลังได้รับความนิยม บางทีคุณอาจต้องการเน้นความแตกต่างระหว่างเนื้อหาและส่วนต่อประสานกับผู้ใช้ให้มากขึ้น คุณอาจต้องการทำให้ไซต์ดูเหมือนแอปพลิเคชัน หรือคุณเพียงแค่ต้องการใช้ แบบอักษรที่สวยงามโดยไม่ชักช้า

แต่การใช้งานนั้นไม่ง่ายอย่างที่เราต้องการ CSS รองรับฟอนต์เหล่านี้ในลักษณะที่ทำให้เคลิบเคลิ้มเล็กน้อย

หมายเหตุ: "แบบอักษรของอินเทอร์เฟซระบบ" เป็นแบบอักษรที่ใช้แสดงอินเทอร์เฟซของระบบปฏิบัติการ - อย่าสับสนกับแบบอักษรของระบบ เช่น แบบอักษรที่ติดตั้งบนระบบของผู้ใช้

สองวิธี

บน ช่วงเวลานี้มีสองวิธีในการใช้แบบอักษรอินเทอร์เฟซระบบในการพิมพ์

วิธีแรก

ประกอบด้วยการใช้การประกาศ CSS "วิเศษ" สั้นๆ:

แบบอักษร: เมนู

วิธีที่สอง

วิธีที่สองคือการระบุชื่อแบบอักษรทั้งหมด:

นอกจากนี้ยังมีข้อเสีย:

ตัวเลือกอื่น

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

คุณยังสามารถลองส่ง ความหมายที่แตกต่างกัน CSS จากเซิร์ฟเวอร์ขึ้นอยู่กับตัวแทนผู้ใช้ หรือทำเช่นเดียวกันกับ JavaScript (เช่น ส่งเฉพาะตระกูลแบบอักษร: "Fira Sans", sans-serif; สำหรับ Firefox OS) แต่ตัวเลือกนี้ยุ่งยาก ดูแลรักษายาก และที่สำคัญที่สุดคือไม่สามารถแก้ปัญหาได้ทั้งหมด

จะทำอย่างไรตอนนี้?

ปัจจุบันสื่อใช้วิธีที่สอง:

ตระกูลแบบอักษร: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

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

เราสามารถปรับปรุงเทคนิคนี้ด้วยกัน ด้านล่างนี้คือบล็อกที่มีข้อความที่ควรแสดงในแบบอักษรอินเทอร์เฟซของระบบของคุณ หากไม่ได้ผลหรือคุณมีความคิดใด ๆ เกี่ยวกับเรื่องนี้ โปรดแสดงความคิดเห็น

สิ่งนี้ควรแสดงในแบบอักษร UI ของระบบของคุณ สุนัขจิ้งจอกสีน้ำตาลกระโดดข้ามสุนัขขี้เกียจอย่างรวดเร็ว ข้อความนี้ต้องแสดงในแบบอักษรอินเทอร์เฟซระบบ

มุมมองรายละเอียดของรายการแบบอักษร

ในขณะนี้ วิธีนี้มีปัญหาดังต่อไปนี้:

• จนถึงอย่างน้อยเดือนธันวาคม 2015 Firefox บน Mac OS X จะใช้ Neue Helvetica แทน San Francisco
• นอกจากนี้ใน Mac OS X Neue Helvetica จะแสดงแทน Lucida Grande ในเวอร์ชันก่อนหน้า Yosemite
• ในความนิยมน้อย ระบบปฏิบัติการและการกำหนดค่าที่ซับซ้อนยิ่งขึ้น ทางเลือกที่เหมาะสมแบบอักษรที่ถูกต้องนั้นยากยิ่งกว่า

หากคุณสนใจในรายละเอียด มาดูกันว่ารายการนี้ควรมีลักษณะอย่างไรเพื่อให้ทำงานได้อย่างถูกต้อง:

ตระกูลแบบอักษร: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;

กลุ่มแรกมีคุณสมบัติที่อ้างถึงฟอนต์อินเทอร์เฟซของระบบ มีความน่าเชื่อถือและไม่มีโอกาสที่เบราว์เซอร์จะสร้างความสับสนให้กับผู้อื่น:

• -apple-system ครอบคลุมซานฟรานซิสโกใน Safari บน Mac OS X และ iOS และใน Mac OS X เวอร์ชันเก่า Neue Helvetica และ Lucida Grande ด้วยค่านี้ การเลือกอัตโนมัติจะทำงานระหว่าง San Francisco Text และ San Francisco Display ขึ้นอยู่กับขนาดฟอนต์
• BlinkMacSystemFont เทียบเท่ากับค่าก่อนหน้าและทำงานใน Chrome บน Mac OS X

ที่ กลุ่มต่อไปแบบอักษรที่รู้จักของอินเทอร์เฟซระบบจะถูกเน้น:

• Segoe UI ครอบคลุม Windows และ Windows Phone
• Roboto เป็น Android และ Chrome OS ใหม่ อยู่ในตำแหน่งหลังจาก Segoe UI เพื่อให้นักพัฒนา Android ทำงานบน Windows โดยติดตั้ง Roboto เพื่อให้ Roboto ไม่แทนที่ Segoe UI
• Oxygen เป็นฟอนต์ KDE แน่นอน Ubuntu เป็น Ubuntu และ Cantarell เป็น GNOME แบบอักษรสามแบบสำหรับ Linux ในคราวเดียว แต่ด้วยจำนวนการแจกแจงที่มากมาย สิ่งเหล่านี้จึงไม่สามารถแก้ปัญหาได้
• ฟอนต์ Fira Sans Firefox OS
• Droid Sans - Android เวอร์ชันเก่า
• โปรดทราบว่าเราไม่ได้ระบุชื่อฟอนต์ซานฟรานซิสโก บน iOS และ Mac OS X ซานฟรานซิสโกจะแสดงเป็น "ฟอนต์ที่ซ่อนอยู่" แทนที่จะเป็นฟอนต์สาธารณะ
• และเรายังไม่ได้ระบุ San Francisco โดยใช้ .SFNSText-Regular ซึ่งเป็นชื่อภายในของ PostScript สำหรับ San Francisco บน Mac OS X โดยจะใช้ได้เฉพาะใน Chrome และมีความยืดหยุ่นน้อยกว่า BlinkMacSystemFont

ในกลุ่มที่สาม เรามีแบบอักษรที่ใช้เป็นทางเลือก:

• Helvetica Neue ใช้ใน Mac OS X ก่อน El Capitan แบบอักษรจะอยู่ท้ายสุดของรายการเนื่องจากมีการใช้งานอย่างแพร่หลาย
• sans-serif เป็นทางเลือกดั้งเดิมที่มีฟอนต์ sans-serif เริ่มต้น

วิวัฒนาการของฟอนต์อินเทอร์เฟซระบบบน Windows นั้นน่าทึ่งกว่าบน Mac ตั้งแต่ฟอนต์บิตแมป monospaced ของ Windows 1.0 ในปี 1985 ไปจนถึง ความละเอียดสูง Segoe UI ใน Windows 10 (เวอร์ชันที่ใหญ่กว่า)

อนาคต

ยังมีบางอย่างที่จะทำงานกับที่นี่ เริ่มจากความจริงที่ว่าเทคนิคนี้ใช้ได้กับการพิมพ์แบบตะวันตกเท่านั้น ปัญหายังเกิดขึ้นหากคุณต้องการจัดแนวช่องว่างภายในหรือความสูงของบรรทัดตามฟอนต์อินเทอร์เฟซที่ใช้ ซึ่งในกรณีนี้ คุณต้องใช้วิธีแบบผสมหรือรู้จักฟอนต์หลังจากเรนเดอร์

แต่ถึงกระนั้นผลลัพธ์ก็ดี หวังว่าในอนาคตทุกอย่างจะซับซ้อนน้อยลง หากคุณสนใจสิ่งนี้เช่นกัน โปรดแจ้งให้ผู้ผลิตเบราว์เซอร์ทราบ

Mac OS X สามเวอร์ชันล่าสุดใช้ฟอนต์อินเทอร์เฟซที่แตกต่างกันสามแบบ: Lucida Grande บน Mac OS 10.9 (Mavericks); Neue Helvetica เวอร์ชันพิเศษบน Mac OS 10.10 (Yosemite); เวอร์ชันพิเศษของ San Francisco บน Mac OS 10.11 (El Capitan) มีเหตุผลที่จะสันนิษฐานว่าจะใช้ San Francisco ในเวอร์ชันอนาคต (