การเลือกลักษณะการทำงานสำหรับแบบอักษรของเว็บในขณะที่โหลดอยู่อาจเป็นเทคนิคการปรับแต่งประสิทธิภาพที่สำคัญ ข้อบ่งชี้การแสดงแบบอักษรใหม่สำหรับ @font-face ช่วยให้นักพัฒนาแอปเลือกวิธีแสดงผลแบบอักษรบนเว็บ (หรือแบบอักษรสำรอง) โดยขึ้นอยู่กับระยะเวลาที่ใช้ในการโหลด
ความแตกต่างของการแสดงแบบอักษรในปัจจุบัน
เว็บฟอนต์ช่วยให้นักพัฒนาซอฟต์แวร์สามารถรวมการพิมพ์แบบอักษรที่สมบูรณ์ไว้ในโปรเจ็กต์ของตนได้ ซึ่งมีข้อดีคือถ้าผู้ใช้ยังไม่ได้พิมพ์แบบอักษรดังกล่าว เบราว์เซอร์จะต้องใช้เวลาดาวน์โหลดแบบอักษรนั้น เนื่องจากเครือข่ายอาจทำงานไม่สม่ำเสมอ เวลาในการดาวน์โหลดนี้จึงอาจส่งผลเสียต่อประสบการณ์ของผู้ใช้ได้ เพราะไม่มีใครจะสนใจว่าข้อความของคุณจะสวยขนาดไหน ถ้าใช้เวลาแสดงนานเกินไป
เพื่อลดความเสี่ยงบางส่วนที่ฟอนต์ดาวน์โหลดช้า เบราว์เซอร์ส่วนใหญ่จะเริ่มหมดเวลา ซึ่งหลังจากนั้นจะมีการใช้แบบอักษรสำรอง นี่เป็นเทคนิคที่มีประโยชน์ แต่เบราว์เซอร์จะต่างกันตามการใช้งานจริง
| เบราว์เซอร์ | หมดเวลา | Fallback | สลับ |
|---|---|---|---|
| Chrome 35 ขึ้นไป | 3 วินาที | ได้ | ได้ |
| Opera | 3 วินาที | ได้ | ได้ |
| Firefox | 3 วินาที | ได้ | ได้ |
| Internet Explorer | 0 วินาที | ได้ | ได้ |
| Safari | ไม่มีระยะหมดเวลา | ไม่มีข้อมูล | ไม่มีข้อมูล |
- Chrome และ Firefox จะหมดเวลา 3 วินาทีหลังจากที่ข้อความแสดง พร้อมแบบอักษรสำรอง หากดาวน์โหลดแบบอักษรได้ ในที่สุดจะมีการสลับ และข้อความจะแสดงผลอีกครั้งโดยใช้แบบอักษรที่ต้องการ
- Internet Explorer จะหมดเวลาเป็น 0 วินาที ซึ่งจะส่งผลให้มีการแสดงผลข้อความทันที หากแบบอักษรที่ขอยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรสำรองและจะแสดงผลข้อความอีกครั้งในภายหลังเมื่อมีแบบอักษรที่ขอให้ใช้
- Safari จะไม่มีการหมดเวลาใดๆ (หรืออย่างน้อยก็ไม่ได้เกินระยะหมดเวลาของเครือข่ายพื้นฐาน)
และเหตุการณ์นี้จะเลวร้ายกว่าเดิม นักพัฒนาแอปจึงมีการควบคุมอย่างจำกัดในการตัดสินใจว่ากฎเหล่านี้จะส่งผลกระทบต่อแอปพลิเคชันของตนอย่างไร นักพัฒนาซอฟต์แวร์ที่คำนึงถึงประสิทธิภาพอาจต้องการได้รับประสบการณ์การใช้งานเบื้องต้นที่เร็วขึ้นซึ่งใช้แบบอักษรสำรอง และใช้ประโยชน์จากแบบอักษรของเว็บที่ดีกว่าในการเข้าชมครั้งต่อๆ ไปหลังจากมีโอกาสดาวน์โหลดแล้วเท่านั้น ในการใช้เครื่องมืออย่าง Font Loading API คุณอาจลบล้างลักษณะการทำงานเริ่มต้นบางอย่างของเบราว์เซอร์และเพิ่มประสิทธิภาพได้ แต่มีค่าใช้จ่ายที่ต้องเขียน JavaScript จำนวนน้อยๆ ที่ต้องแทรกเข้ามาในหน้าเว็บหรือขอจากไฟล์ภายนอก ทำให้เกิดเวลาในการตอบสนองของ HTTP เพิ่มเติม
คณะทำงานของ CSS ได้เสนอข้อบ่งชี้ @font-face ใหม่ ซึ่งก็คือ font-display และพร็อพเพอร์ตี้ที่เกี่ยวข้องสำหรับการควบคุมวิธีแสดงผลแบบอักษรที่ดาวน์โหลดได้ก่อนที่จะโหลดสมบูรณ์ เพื่อช่วยแก้ไขสถานการณ์นี้
ไทม์ไลน์การดาวน์โหลดแบบอักษร
font-display จะแบ่งอายุการใช้งานของการดาวน์โหลดแบบอักษรออกเป็น 3 ช่วงเวลาหลัก ซึ่งคล้ายกับลักษณะระยะหมดเวลาของแบบอักษรที่มีอยู่ซึ่งบางเบราว์เซอร์ใช้กันในปัจจุบัน
- เครื่องหมายจุดแรกคือช่วงเวลาบล็อกแบบอักษร ในระหว่างนี้ หากระบบไม่โหลดแบบอักษร องค์ประกอบที่พยายามใช้แบบอักษรดังกล่าวจะต้องแสดงผลด้วยแบบอักษรสำรองที่มองไม่เห็น หากโหลดแบบอักษรสำเร็จระหว่างช่วงการบล็อก ระบบจะใช้แบบอักษรตามปกติ
- ระยะเวลาการสลับแบบอักษรจะเกิดขึ้นทันทีหลังจากช่วงบล็อกแบบอักษร ในระหว่างนี้ หากระบบไม่โหลดแบบอักษร องค์ประกอบที่พยายามใช้แบบอักษรดังกล่าวจะต้องแสดงผลด้วยแบบอักษรสำรองแทน หากโหลดแบบอักษรสำเร็จระหว่างระยะเวลาการสลับ ระบบจะใช้หน้าแบบอักษรตามปกติ
- ระยะเวลาความล้มเหลวของแบบอักษรจะเกิดขึ้นทันทีหลังจากระยะเวลาการสลับแบบอักษร หากระบบยังไม่ได้โหลดแบบอักษรเมื่อช่วงเวลานี้เริ่มต้นขึ้น ระบบจะทำเครื่องหมายเป็นการโหลดที่ล้มเหลว ซึ่งทำให้เกิดการสำรองแบบอักษรปกติ มิเช่นนั้นระบบจะใช้ลักษณะแบบอักษรตามปกติ
การทำความเข้าใจช่วงเวลาเหล่านี้หมายความว่าคุณจะใช้ font-display เพื่อตัดสินใจว่าควรแสดงผลแบบอักษรอย่างไร ทั้งนี้ขึ้นอยู่กับว่าดาวน์โหลดมาเมื่อใด
การแสดงแบบอักษรแบบใดเหมาะกับคุณ
หากต้องการทำงานกับตัวบ่งชี้ font-display ให้เพิ่มเครื่องหมาย at ของ @font-face ดังนี้
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
ปัจจุบัน font-display รองรับช่วงค่า auto | block | swap | fallback | optional ดังต่อไปนี้
อัตโนมัติ
auto จะใช้กลยุทธ์การแสดงแบบอักษรใดก็ได้ที่ User Agent ใช้ ปัจจุบันเบราว์เซอร์ส่วนใหญ่มีกลยุทธ์เริ่มต้นคล้ายกับการบล็อก
บล็อก
block จะทำให้แบบอักษรมีช่วงบล็อกสั้นๆ (ในกรณีส่วนใหญ่ ขอแนะนำให้ใช้ 3 วินาที) และระยะเวลาการสลับไม่รู้จบ กล่าวคือ เบราว์เซอร์จะดึงข้อความ "ซ่อนตัว" ในตอนแรกหากแบบอักษรไม่โหลดขึ้นมา แต่เปลี่ยนแบบอักษรทันทีที่โหลดเสร็จ ในการดำเนินการนี้ เบราว์เซอร์จะสร้างแบบอักษรที่ไม่ระบุตัวตนที่มีเมตริกคล้ายกับแบบอักษรที่เลือกไว้ แต่มีรูปอักขระทั้งหมดที่ไม่มี "หมึก" คุณควรใช้ค่านี้เฉพาะเมื่อต้องแสดงผลข้อความในรูปแบบแบบอักษรที่เจาะจงเพื่อให้หน้าเว็บใช้งานได้
สลับ
การสลับจะทำให้หน้าปัดมีช่วงเวลาบล็อกเป็น 0 วินาทีและระยะเวลาการสลับไม่รู้จบ ซึ่งหมายความว่าเบราว์เซอร์จะวาดข้อความทันทีพร้อมข้อความสำรอง ถ้าไม่โหลดแบบอักษรไว้ แต่เปลี่ยนแบบอักษรให้ทันเมื่อโหลดเสร็จ วิธีนี้คล้ายกับ block ตรงคุณควรใช้ค่าเฉพาะเมื่อแสดงผลข้อความในแบบอักษรบางตัวที่มีความสำคัญต่อหน้าเว็บ แต่การแสดงผลเป็นแบบอักษรใดก็ตามจะยังคงได้รับข้อความที่ถูกต้อง ข้อความโลโก้เป็นตัวเลือกที่ดีสำหรับการสลับ เนื่องจากการแสดงชื่อบริษัทโดยใช้ข้อความสำรองที่สมเหตุสมผลจะทำให้ข้อความเข้าใจได้ แต่ท้ายที่สุดแล้วคุณก็ควรใช้แบบตัวพิมพ์ที่เป็นทางการ
fallback
สำรอง ทำให้แบบอักษรมีช่วงบล็อกที่เล็กมาก (ในกรณีส่วนใหญ่ ขอแนะนำให้ใช้ 100 มิลลิวินาทีหรือน้อยกว่า) และระยะเวลาการสลับที่สั้น (ในกรณีส่วนใหญ่ ขอแนะนำให้เลือก 3 วินาที) กล่าวคือ แบบอักษรจะแสดงผลโดยมีสำรองไว้ในตอนแรกหากยังไม่โหลด แต่ระบบจะสลับแบบอักษรทันทีที่โหลดเสร็จ อย่างไรก็ตาม หากเวลาผ่านไปเร็วเกินไป ระบบจะใช้ตัวเลือกสำรองตลอดอายุการใช้งานหน้าเว็บ ทางเลือกสำรอง เป็นตัวเลือกที่ดีสำหรับข้อความ เช่น เนื้อความ ที่คุณต้องการให้ผู้ใช้เริ่มอ่านโดยเร็วที่สุด และไม่ต้องการรบกวนประสบการณ์การใช้งานด้วยการเลื่อนข้อความไปมาขณะที่มีการโหลดแบบอักษรใหม่
ไม่บังคับ
ไม่บังคับทำให้แบบอักษรมีช่วงบล็อกที่เล็กมาก (ในกรณีส่วนใหญ่ ขอแนะนำให้ใช้ 100 มิลลิวินาทีหรือน้อยกว่า) และระยะเวลาการสลับเป็น 0 วินาที คล้ายกับทางเลือกสำรอง นี่เป็นทางเลือกที่ดีสำหรับกรณีที่แบบอักษรในการดาวน์โหลดเป็นแบบที่ "มีไว้ก็ดี" แต่ไม่สำคัญต่อประสบการณ์การใช้งาน ค่าไม่บังคับปล่อยให้เบราว์เซอร์ตัดสินใจว่าจะเริ่มดาวน์โหลดแบบอักษรหรือไม่ โดยอาจเลือกที่จะไม่ดาวน์โหลดหรืออาจมีลำดับความสำคัญต่ำก็ได้ขึ้นอยู่กับสิ่งที่คิดว่าดีที่สุดสำหรับผู้ใช้ วิธีนี้อาจเป็นประโยชน์ในกรณีที่การเชื่อมต่อของผู้ใช้มีสัญญาณอ่อน และดึงแบบอักษรออกอาจไม่ใช่การใช้ทรัพยากรอย่างมีประสิทธิภาพสูงสุด
การสนับสนุนเบราว์เซอร์
ปัจจุบัน font-display ตามแฟล็กฟีเจอร์แพลตฟอร์มเว็บรุ่นทดลองใน Chrome 49 บนเดสก์ท็อป และกำลังจัดส่งใน Opera และ Opera สำหรับ Android
ข้อมูลประชากร
ลองดูตัวอย่างเพื่อลองทดสอบ
font-display สำหรับนักพัฒนาซอฟต์แวร์ที่คำนึงถึงประสิทธิภาพ ก็อาจเป็น
เครื่องมือที่มีประโยชน์อีกชนิดหนึ่งในกระเป๋าเครื่องมือของคุณ