การควบคุมประสิทธิภาพของแบบอักษรด้วยการแสดงแบบอักษร

Rob Dodson

การเลือกลักษณะการทำงานสำหรับแบบอักษรของเว็บในขณะที่โหลดอยู่อาจเป็น เทคนิคการปรับแต่งประสิทธิภาพที่สำคัญ ข้อบ่งชี้การแสดงแบบอักษรใหม่สำหรับ @font-face ให้นักพัฒนาแอปเลือกวิธีแสดงผลแบบอักษรบนเว็บ (หรือแบบอักษรสำรอง) โดยขึ้นอยู่กับระยะเวลาในการโหลด

ความแตกต่างของการแสดงแบบอักษรในปัจจุบัน

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

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

• Chrome และ Firefox จะหมดเวลา 3 วินาทีหลังจากที่ข้อความแสดง ด้วยแบบอักษรสำรอง หากดาวน์โหลดแบบอักษรได้ ก็แสดงว่ามีการสลับ และข้อความจะแสดงผลอีกครั้งด้วยแบบอักษรที่ต้องการ
• Internet Explorer จะหมดเวลาเป็น 0 วินาที ซึ่งจะแสดงข้อความทันที ในการแสดงภาพ หากแบบอักษรที่ต้องการยังไม่พร้อมใช้งาน ระบบจะใช้แบบอักษรสำรอง ข้อความจะแสดงผลอีกครั้งภายหลังเมื่อแบบอักษรที่ขอใช้ได้
• Safari ไม่มีการหมดเวลา (หรือไม่ได้ทำงานนอกเหนือจากเครือข่ายพื้นฐานเป็นอย่างน้อย) หมดเวลา)

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

คณะทำงาน CSS ได้เสนอ ตัวบ่งชี้ @font-face, font-display และพร็อพเพอร์ตี้ที่เกี่ยวข้องสำหรับ ควบคุมการแสดงแบบอักษรที่ดาวน์โหลดได้ก่อนที่จะโหลดเสร็จ

ไทม์ไลน์การดาวน์โหลดแบบอักษร

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

1. เครื่องหมายจุดแรกคือช่วงเวลาบล็อกแบบอักษร ในช่วงเวลานี้ หาก ระบบไม่โหลดแบบอักษร องค์ประกอบที่พยายามใช้แบบอักษรนี้จะต้องแสดงผลแทน ด้วยแบบอักษรสำรองที่มองไม่เห็น หากโหลดแบบอักษรสำเร็จในระหว่าง ช่วงระยะบล็อก จะใช้แบบอักษรตามปกติ
2. ระยะเวลาการสลับแบบอักษรจะเกิดขึ้นทันทีหลังจากช่วงบล็อกแบบอักษร ระหว่าง หากแบบอักษรดังกล่าวไม่โหลดขึ้นมา องค์ประกอบที่พยายามจะใช้แบบอักษรดังกล่าว ต้องแสดงผลด้วยแบบอักษรสำรองแทน หากกำหนดแบบอักษรสำเร็จ จะโหลดระหว่างระยะเวลาการสลับ จากนั้นจะมีการใช้แบบอักษรตามปกติ
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 ยิงประตู แต่สำหรับนักพัฒนาแอปที่คำนึงถึงประสิทธิภาพ ก็เป็นอีกตัวเลือกหนึ่ง ที่มีประโยชน์ในกระเป๋าเครื่องมือของคุณ