การเลือกลักษณะการทำงานของแบบอักษรเว็บในขณะที่กำลังโหลดอาจเป็นเทคนิคการปรับแต่งประสิทธิภาพที่สำคัญ ข้อบ่งชี้การแสดงแบบอักษรใหม่สำหรับ @font-face ช่วยให้นักพัฒนาซอฟต์แวร์เลือกได้ว่าจะแสดงแบบอักษรบนเว็บอย่างไร (หรือใช้แบบอักษรสำรอง) โดยขึ้นอยู่กับระยะเวลาในการโหลด
ความแตกต่างของการแสดงแบบอักษรในปัจจุบัน
Web Fonts ช่วยให้นักพัฒนาซอฟต์แวร์สามารถรวมแบบอักษรที่หลากหลายไว้ในโปรเจ็กต์ของตน โดยมีข้อดีข้อเสียคือหากผู้ใช้ยังไม่มีแบบอักษร เบราว์เซอร์ก็ต้องใช้เวลาในการดาวน์โหลดอีกสักระยะ เนื่องจากเครือข่ายอาจทำงานไม่สม่ำเสมอ เวลาในการดาวน์โหลดนี้จึงมีโอกาสส่งผลเสียต่อประสบการณ์ของผู้ใช้ เพราะสุดท้ายแล้ว ไม่มีใครจะสนใจว่าข้อความของคุณจะดูดีแค่ไหน หากต้องใช้เวลาอย่างมากในการแสดงผล
หากต้องการลดความเสี่ยงในการดาวน์โหลดแบบอักษรที่ช้า เบราว์เซอร์ส่วนใหญ่จึงมีระยะหมดเวลาหลังจากที่จะใช้แบบอักษรสำรอง นี่เป็นเทคนิคที่มีประโยชน์ แต่ น่าเสียดาย เบราว์เซอร์มีลักษณะการใช้งานจริงต่างไปจากเดิม
| เบราว์เซอร์ | หมดเวลา | 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 ให้เพิ่มแอตทริบิวต์ @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 วินาที) และระยะเวลาการสลับไม่มีที่สิ้นสุด กล่าวอีกนัยหนึ่งคือ เบราว์เซอร์จะเขียนข้อความ "ซ่อนตัว" ในตอนแรกหากแบบอักษรไม่โหลด แต่สลับแบบอักษรทันทีที่โหลด ในการดำเนินการดังกล่าว เบราว์เซอร์จะสร้างแบบอักษรแบบไม่ระบุตัวตนที่มีเมตริก คล้ายกับแบบอักษรที่เลือก แต่รูปอักขระทั้งหมดไม่มี "หมึก" ควรใช้ค่านี้ต่อเมื่อจำเป็นต้องแสดงผลข้อความด้วยแบบอักษรหนึ่งๆ เพื่อให้หน้าเว็บนั้นใช้งานได้
สลับ
swap กำหนดให้แบบอักษรมีช่วงบล็อกเป็น 0 วินาทีและระยะเวลาการสลับที่ไม่สิ้นสุด ซึ่งหมายความว่าเบราว์เซอร์จะดึงข้อความขึ้นมาทันทีพร้อมหน้าสำรองในกรณีที่ไม่ได้โหลดแบบอักษรไว้ แต่ให้สลับแบบอักษรเข้าทันทีที่โหลด เช่นเดียวกับ block ค่านี้ควรใช้เฉพาะเมื่อการแสดงผลข้อความในแบบอักษรหนึ่งๆ สำคัญสำหรับหน้าเว็บเท่านั้น แต่การแสดงผลในแบบอักษรใดๆ จะยังคงได้รับข้อความที่ถูกต้อง ข้อความโลโก้เป็นตัวเลือกที่ดีสำหรับการสลับ เนื่องจากการแสดงชื่อบริษัทโดยใช้คำสำรองที่สมเหตุสมผลจะทำให้ข้อความครอบคลุม แต่สุดท้ายคุณก็ต้องใช้แบบอักษรที่เป็นทางการ
fallback
fallback กำหนดให้แบบอักษรมีช่วงระยะเวลาบล็อกที่น้อยมาก (ในกรณีส่วนใหญ่คือ 100 มิลลิวินาที) และระยะเวลาการสลับที่สั้น (ในกรณีส่วนใหญ่ แนะนำให้มี 3 วินาที) กล่าวคือ แบบอักษรจะแสดงโดยมีทางเลือกสำรองในตอนแรกหากไม่ได้โหลด แต่จะมีการสลับแบบอักษรทันทีที่โหลด อย่างไรก็ตาม หากเวลาผ่านไปนานเกินไป ระบบจะใช้วิดีโอสำรองไปตลอดช่วงเวลาที่เหลือของหน้า fallback เป็นตัวเลือกที่ดีสำหรับการทำสิ่งต่างๆ เช่น เนื้อความที่ต้องการให้ผู้ใช้เริ่มอ่านโดยเร็วที่สุดและไม่ต้องการรบกวนประสบการณ์ใช้งานด้วยการเลื่อนข้อความไปมาเมื่อโหลดแบบอักษรใหม่เข้ามา
ไม่บังคับ
ไม่บังคับ ทำให้หน้าปัดมีช่วงระยะเวลาบล็อกที่น้อยมาก (ในกรณีส่วนใหญ่คือ 100 มิลลิวินาที) และระยะเวลาการสลับ 0 วินาที นี่เป็นทางเลือกที่ดีคล้ายกับ fallback เมื่อแบบอักษรสำหรับดาวน์โหลด “น่ามี” มากกว่า แต่ก็ไม่สำคัญต่อประสบการณ์การใช้งาน ค่า ไม่บังคับ จะกำหนดให้เบราว์เซอร์ตัดสินใจว่าจะเริ่มต้นดาวน์โหลดแบบอักษรหรือไม่ หรือเบราว์เซอร์อาจเลือกที่จะไม่ทำ หรืออาจทำโดยมีลำดับความสำคัญต่ำ ขึ้นอยู่กับสิ่งที่คิดว่าดีที่สุดสำหรับผู้ใช้ วิธีนี้อาจเป็นประโยชน์ในกรณีที่ผู้ใช้มีสัญญาณการเชื่อมต่อที่มีสัญญาณอ่อนและการดึงแบบอักษรลงอาจไม่ใช่การใช้ทรัพยากรที่ดีที่สุด
การสนับสนุนเบราว์เซอร์
ปัจจุบัน font-display อยู่หลังแฟล็กฟีเจอร์แพลตฟอร์มเว็บแบบทดลองใน Chrome 49 บนเดสก์ท็อป และกำลังจัดส่งใน Opera และ Opera สำหรับ Android
เดโม
ดูตัวอย่างเพื่อ
font-display ดูตัวอย่าง สำหรับนักพัฒนาซอฟต์แวร์ที่ใส่ใจเรื่องประสิทธิภาพ เครื่องมือ
ที่เป็นประโยชน์อีกอย่างหนึ่งคือ