แบบอักษรสำรองที่มีความเสถียรของภาพ

เมื่อโหลดแบบอักษรบนเว็บ แบบอักษรเหล่านั้นมักจะแทนที่แบบอักษรสำรองที่มีขนาดแตกต่างกัน แม้ว่าจะตั้งค่าทั้ง 2 แบบเป็น font-size เดียวกันก็ตาม ซึ่งจะทำให้เกิด "การเปลี่ยนเลย์เอาต์" (Cumulative Layout Shift) และอาจทำให้ข้อความอ่านไม่ออกหากตัวพิมพ์เล็ก (ความสูง x) ของแบบอักษรสำรองแตกต่างจากแบบอักษรที่ต้องการอย่างมาก

พร็อพเพอร์ตี้ font-size-adjust จะช่วยแก้ปัญหานี้ด้วยการปรับขนาดแบบอักษรให้เป็นมาตรฐานตามเมตริกที่เฉพาะเจาะจง (โดยปกติคือความสูง x) เพื่อให้ข้อความใช้พื้นที่ภาพเดียวกันไม่ว่าแบบอักษรใดจะทำงานอยู่ก็ตาม

ขั้นตอนการติดตั้งใช้งาน

1. ระบุสัดส่วนภาพของแบบอักษรที่ต้องการ

หากต้องการปรับขนาดแบบอักษรสำรองให้เป็นมาตรฐาน คุณต้องมี "ค่าสัดส่วน" (อัตราส่วนของตัวอักษรพิมพ์เล็กต่อขนาดแบบอักษร) ของแบบอักษรหลัก

• การค้นพบอัตโนมัติ (แนะนำ): ใช้คีย์เวิร์ด from-font เพื่อให้เบราว์เซอร์ดึงอัตราส่วนจากแบบอักษรหลักของเว็บ
• การคำนวณด้วยตนเอง: หากทราบค่าที่เฉพาะเจาะจง (เช่น 0.545 สำหรับ Verdana) คุณสามารถระบุค่านั้นได้โดยตรงเพื่อให้ควบคุมได้แม่นยำยิ่งขึ้น

2. ใช้ font-size-adjust กับคอนเทนเนอร์ข้อความ

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

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (ไม่บังคับ) ปรับสำหรับเมตริกที่เฉพาะเจาะจง

แม้ว่าความสูงของตัว x จะเป็นค่าเริ่มต้นและเป็นค่าที่ใช้กันมากที่สุด แต่คุณสามารถปรับให้เป็นมาตรฐานโดยใช้เมตริกอื่นๆ เช่น cap-height (มีประโยชน์สำหรับส่วนหัวที่เป็นตัวพิมพ์ใหญ่ทั้งหมด) หรือ ch-width (มีประโยชน์สำหรับแบบอักษรที่มีความกว้างอักษรขนาดเดียว)

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. ตรวจสอบความเสถียรของภาพ

ตรวจสอบว่าค่า font-size-adjust สอดคล้องกับโฆษณาสำรองอย่างถูกต้อง คุณทดสอบได้โดยบล็อกแบบอักษรบนเว็บชั่วคราวหรือปรับการประกาศ font-family ในเครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์ และตรวจสอบว่าเลย์เอาต์ข้อความยังคงเสถียร

กลยุทธ์สำรอง

ในเบราว์เซอร์ที่ไม่รองรับ font-size-adjust ระบบจะแสดงผลแบบอักษรตามขนาดเริ่มต้น ซึ่งอาจส่งผลให้เลย์เอาต์เปลี่ยนหรือความสามารถในการอ่านเปลี่ยนแปลงระหว่างการสลับแบบอักษร

หากต้องการลดปัญหานี้โดยไม่ใช้ font-size-adjust คุณสามารถใช้ข้อบ่งชี้ @font-face size-adjust, ascent-override และ descent-override เพื่อปรับแต่งแบบอักษรสำรองด้วยตนเอง แม้ว่าการคำนวณจะซับซ้อนกว่าค่า font-size-adjust ค่าเดียวก็ตาม