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

Rob Dodson

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

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

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

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

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

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

เพื่อช่วยแก้ไขสถานการณ์นี้ กลุ่มทํางาน CSS ได้เสนอ@font-faceตัวบ่งชี้ใหม่ font-display และพร็อพเพอร์ตี้ที่เกี่ยวข้องสําหรับการควบคุมวิธีแสดงผลแบบอักษรที่ดาวน์โหลดได้ก่อนที่จะโหลดอย่างเต็มรูปแบบ

ลำดับเวลาการดาวน์โหลดแบบอักษร

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

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 วินาที) และระยะเวลาสลับแบบไม่จำกัด กล่าวคือ เบราว์เซอร์จะวาดข้อความที่ "มองไม่เห็น" ในช่วงแรกหากไม่ได้โหลดแบบอักษร แต่จะใช้แบบอักษรที่โหลดไว้ทันทีที่โหลด โดยเบราว์เซอร์จะสร้างแบบอักษรที่ไม่ระบุตัวตนซึ่งมีเมตริกคล้ายกับแบบอักษรที่เลือก แต่สัญลักษณ์ทั้งหมดไม่มี "หมึก" คุณควรใช้ค่านี้เฉพาะในกรณีที่จำเป็นต้องแสดงผลข้อความในแบบอักษรหนึ่งๆ เพื่อให้หน้าเว็บใช้งานได้

สลับ

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

fallback

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

ไม่บังคับ

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

การสนับสนุนเบราว์เซอร์

ปัจจุบัน font-display อยู่หลัง Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองใน Chrome 49 บนเดสก์ท็อป และพร้อมให้บริการใน Opera และ Opera สำหรับ Android

สาธิต

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