ตั้งแต่ Chrome 83 เป็นต้นไป ลิงก์ rel="preload" และ font-display: สามารถรวม "ไม่บังคับ" เพื่อนำเลย์เอาต์ที่แยบยลออกได้โดยสมบูรณ์
Chrome 83 ขจัดปัญหาการเปลี่ยนแปลงเลย์เอาต์เมื่อโหลดแบบอักษรที่ไม่บังคับล่วงหน้า เมื่อเพิ่มประสิทธิภาพวงจรการแสดงผล
การรวม <link rel="preload"> กับ font-display: optional เป็นวิธีที่มีประสิทธิภาพที่สุดในการ
รับประกันความไม่ยุ่งยากของเลย์เอาต์เมื่อแสดงผลแบบอักษรที่กำหนดเอง
ความเข้ากันได้กับเบราว์เซอร์
ดูข้อมูลการสนับสนุนล่าสุดจากเบราว์เซอร์ต่างๆ ของ MDN
การแสดงแบบอักษร
การเปลี่ยนเลย์เอาต์หรือการจัดเรียงใหม่เกิดขึ้นเมื่อทรัพยากรในหน้าเว็บเปลี่ยนแปลงแบบไดนามิก ซึ่งส่งผลให้เกิด "การเปลี่ยนแปลง" ของเนื้อหา การดึงข้อมูลและการแสดงผลแบบอักษรเว็บอาจทำให้เลย์เอาต์เปลี่ยนแปลงโดยตรงในวิธีใดวิธีหนึ่งต่อไปนี้
- สลับแบบอักษรสำรองกับแบบอักษรใหม่ ("Flash ของข้อความที่ไม่มีการจัดรูปแบบ")
- ข้อความ "ไม่แสดง" จะแสดงจนกว่าจะมีการแสดงผลแบบอักษรใหม่ในหน้าเว็บ ("Flash ของข้อความที่มองไม่เห็น")
พร็อพเพอร์ตี้ CSS font-display ให้วิธีแก้ไขลักษณะการแสดงผลแบบอักษรที่กำหนดเองผ่านช่วงของค่าที่รองรับที่แตกต่างกัน (auto, block,
swap, fallback และ optional) การเลือกค่าที่จะใช้ขึ้นอยู่กับลักษณะการทำงานที่ต้องการสำหรับแบบอักษรที่โหลดแบบอะซิงโครนัส อย่างไรก็ตาม ค่าที่รองรับทุกๆ ค่าสามารถทริกเกอร์การจัดเรียงใหม่ด้วย 1 ใน 2 วิธีข้างต้นได้ตั้งแต่วันนี้เป็นต้นไป
แบบอักษรที่ไม่บังคับ
พร็อพเพอร์ตี้ font-display ใช้ไทม์ไลน์มีจุด 3 จุดในการจัดการแบบอักษรที่ต้องดาวน์โหลดก่อนจึงจะแสดงผลได้ ดังนี้
- บล็อก: แสดงข้อความ "ไม่แสดงตัว" แต่เปลี่ยนเป็นแบบอักษรเว็บทันทีที่โหลดเสร็จ
- สลับ: แสดงผลข้อความโดยใช้แบบอักษรของระบบสำรอง แต่เปลี่ยนเป็นแบบอักษรเว็บทันทีที่โหลดเสร็จ
- ไม่สำเร็จ: แสดงข้อความโดยใช้แบบอักษรของระบบสำรอง
ก่อนหน้านี้ แบบอักษรที่กำหนดด้วย font-display: optional มีช่วงเวลาบล็อก 100 มิลลิวินาทีและไม่มีระยะเวลาสลับ ซึ่งหมายความว่าข้อความที่ "ไม่แสดง" จะแสดงเป็นเวลาสั้นๆ ก่อนที่จะเปลี่ยนเป็นแบบอักษรสำรอง หากไม่ดาวน์โหลดแบบอักษรภายใน 100 มิลลิวินาที ระบบจะใช้แบบอักษรสำรองและไม่มีการสลับ
font-display: optionalก่อนหน้านี้ใน Chrome เมื่อดาวน์โหลดแบบอักษรหลังจากช่วงบล็อก 100 มิลลิวินาทีอย่างไรก็ตาม ในกรณีที่ดาวน์โหลดแบบอักษรก่อนช่วงบล็อก 100 มิลลิวินาที แบบอักษรที่กำหนดเองจะแสดงผลและใช้ในหน้าเว็บ
font-display: optional ก่อนหน้าใน Chrome เมื่อดาวน์โหลดแบบอักษรก่อนระยะเวลาการบล็อก 100 มิลลิวินาทีChrome จะแสดงผลหน้าเว็บอีกครั้ง 2 ครั้งในทั้ง 2 อินสแตนซ์ ไม่ว่าจะใช้แบบอักษรสำรองหรือไม่ก็ตาม หรือแบบอักษรที่กำหนดเองโหลดเสร็จทันเวลา การทำเช่นนี้ทำให้ข้อความที่มองไม่เห็นกะพริบเล็กน้อย และในกรณีที่แสดงผลแบบอักษรใหม่ ก็อาจทำให้เลย์เอาต์ติดขัดที่ทำให้เนื้อหาบางส่วนในหน้าเปลี่ยนแปลงไป ซึ่งจะเกิดขึ้นแม้ว่าระบบจะจัดเก็บแบบอักษรไว้ในดิสก์แคชของเบราว์เซอร์และโหลดได้ก่อนที่ช่วงเวลาบล็อกจะสิ้นสุดลง
เราใช้การเพิ่มประสิทธิภาพใน Chrome 83 เพื่อนำรอบการแสดงผลแรกสำหรับแบบอักษรที่ไม่บังคับซึ่งโหลดไว้ล่วงหน้าด้วย <link rel="preload'> ออก
แต่ระบบจะบล็อกการแสดงผลจนกว่าแบบอักษรที่กำหนดเองจะโหลดเสร็จสิ้นหรือเวลาผ่านไประยะหนึ่ง ปัจจุบันระยะหมดเวลานี้ตั้งค่าไว้ที่ 100 มิลลิวินาที แต่อาจมีการเปลี่ยนแปลงในอนาคตอันใกล้เพื่อเพิ่มประสิทธิภาพ
font-display: optional ใน Chrome เมื่อมีการโหลดแบบอักษรล่วงหน้า และดาวน์โหลดแบบอักษรหลังจากช่วงบล็อก 100 มิลลิวินาที (ไม่ใช้ Flash สำหรับข้อความที่มองไม่เห็น)
font-display: optional ใน Chrome เมื่อมีการโหลดแบบอักษรล่วงหน้าและดาวน์โหลดแบบอักษรก่อนช่วงบล็อก 100 มิลลิวินาที (ไม่ใช้ Flash กับข้อความที่มองไม่เห็น)การโหลดแบบอักษรที่ไม่บังคับล่วงหน้าใน Chrome จะช่วยลดอุปสรรคในการจัดวางและ Flash ของข้อความที่ไม่จัดรูปแบบ ซึ่งตรงกับลักษณะการทำงานที่จำเป็นตามที่ระบุไว้ในโมดูลแบบอักษร CSS ระดับ 4 โดยที่แบบอักษรที่ไม่บังคับไม่ควรทำให้เกิดการจัดเรียงใหม่ และ User Agent อาจหน่วงเวลาการแสดงผลเป็นระยะเวลาหนึ่งแทน
แม้ว่าไม่จำเป็นต้องโหลดแบบอักษรเสริมล่วงหน้า แต่จะช่วยเพิ่มโอกาสในการโหลดได้ก่อนรอบการแสดงผลแรก โดยเฉพาะอย่างยิ่งหากยังไม่ได้จัดเก็บไว้ในแคชของเบราว์เซอร์
บทสรุป
ทีม Chrome สนใจที่จะรับฟังประสบการณ์จากคุณที่โหลดแบบอักษรที่ไม่บังคับไว้ล่วงหน้าด้วยการเพิ่มประสิทธิภาพใหม่ๆ เหล่านี้ ส่งปัญหาหากพบปัญหา หรือต้องการเสนอคำแนะนำด้านฟีเจอร์