คุณสมบัติ CSS font-size-adjust สำหรับความอ่านง่ายของตัวอักษร

คุณสมบัติ font-size-adjust ใช้รักษาความอ่านง่ายของข้อความเมื่อฟอนต์หลัก (first-choice font) ไม่พร้อมใช้งาน และบราวเซอร์ต้อง fallback ไปใช้ฟอนต์สำรอง ซึ่งอาจมี aspect ratio (อัตราส่วนความสูงของตัวอักษร x-height ต่อ font-size) ต่างกัน

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      font-size-adjust: 0.90;
    }
  </style>
</head>
</body>
  <h2>Heading Two</h2>
  <h2>With font-size-adjust property:</h2>
  <div class="demo">This is demo text.</div>
  <h2>Without font-size-adjust property:</h2>
  <div>This is demo text.</div>
</html>

วิธีการทำงาน: ค่า font-size-adjust: 0.90 หมายถึง aspect ratio ของฟอนต์ที่ต้องการคือ 0.90 บราวเซอร์จะปรับ font-size ของฟอนต์สำรองให้ x-height เท่ากับ 0.90 × font-size ที่กำหนด

สูตร: adjusted font-size = specified font-size × (specified aspect ratio / actual aspect ratio)

รองรับ: Firefox รองรับเต็มรูปแบบ Chrome/Edge รองรับตั้งแต่เวอร์ชันล่าสุด (behind flag) Safari ยังไม่รองรับ