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