Cách bảo toàn đọc được văn bản khi font fallback xảy ra với JavaScript (font-size-adjust)

Thuộc tính fontSizeAdjust (CSS font-size-adjust) bảo toàn kích thước x-height (chữ thường) khi font dự phòng (fallback font) được dùng. Nó điều chỉnh font-size dựa trên tỷ lệ aspect value (x-height / font-size) của font gốc.

Ví dụ minh họa (đã sửa lỗi selector)

Đặt aspect value 0.58 (tương đương Verdana) để văn bản giữ đọc được khi fallback:

<!DOCTYPE html>
<html>
<body>
  <h1>Tiêu đề 1</h1>
  <p id="myID">Đây là văn bản demo.</p>
  <button type="button" onclick="display()">Đặt Aspect Value</button>
  <script>
    function display() {
      document.getElementById("myID").style.fontFamily = "verdana, sans-serif";
      document.getElementById("myID").style.fontSizeAdjust = "0.58";
    }
  </script>
</body>
</html>

Cách hoạt động

Công thức: adjusted-font-size = font-size * (font-size-adjust / aspect-value-of-actual-font)

• Font gốc (Verdana): aspect value ≈ 0.58
• Font fallback (Arial): aspect value ≈ 0.52
• Nếu đặt font-size-adjust: 0.58, khi fallback sang Arial, font-size sẽ nhân 0.58/0.52 ≈ 1.115 để x-height giữ nguyên.

Hỗ trợ trình duyệt

• Firefox: Hỗ trợ đầy đủ từ lâu.
• Chrome/Edge: Hỗ trợ từ phiên bản 119+ (2023).
• Safari: Chưa hỗ trợ (tới 2024).

Polyfill: Dùng font-size-adjust kết hợp @font-face với size-adjust, ascent-override, descent-override, line-gap-override cho kiểm soát chính xác hơn.