Phông chữ-điều chỉnh cỡ chữ của CSS hiện đã có trong Đường cơ sở

Rachel Andrew

Hỗ trợ trình duyệt

  • 127
  • 127
  • 3
  • 16,4

Nguồn

Tài sản CSS font-size-adjust đã có trong Chrome hôm nay, và được tham gia Chương trình cơ sở mới ra mắt. Thuộc tính này có thể giúp ngăn chặn thay đổi bố cục khi phông chữ dự phòng được tải và đảm bảo mức độ dễ đọc của phông chữ dự phòng ở kích thước phông chữ nhỏ hơn. font-size-adjust tài sản là một phần của Khả năng tương tác năm 2024, vì vậy, đây là một thành công nữa trong nỗ lực cải thiện khả năng tương tác của nền tảng web.

Vấn đề

Khi bạn so sánh hai phông chữ có cùng kích thước, tuỳ thuộc vào hình dạng và kích thước ký tự, văn bản được hiển thị có thể chiếm lượng không gian rất khác. Ví dụ: bản giới thiệu sau hiển thị văn bản ở kiểu Verdana và phông chữ đều được đặt thành 16 pixel.

Văn bản hiển thị 16px ở Verdana và trắng.

Sự khác biệt về kích thước được tính đến do giá trị khung hình, chiều cao của chữ thường so với chữ hoa trong phông chữ, khác nhau giữa các phông chữ.

Điều này có thể gây ra 2 sự cố khi phông chữ có giá trị khung hình khác được sử dụng làm phương án dự phòng. Trước tiên, khoảng không gian mà phông chữ chiếm dụng sẽ thay đổi. Thứ hai, phông chữ dự phòng mà bạn lựa chọn có thể khó đọc hơn phông chữ được chỉ định đầu tiên, đặc biệt là ở kích thước phông chữ nhỏ. Điều này là do chiều cao tương đối của chữ thường so với chữ hoa là một yếu tố quan trọng trong mức độ dễ đọc.

Cách font-size-adjust giúp ích cho bạn

Thuộc tính font-size-adjust giúp bạn điều chỉnh phông chữ dự phòng sao cho tốt hơn khớp với phông chữ đầu tiên. Ví dụ sau đây minh hoạ hai phông chữ hiển thị lần này, phông chữ thứ hai đã được điều chỉnh cho phù hợp với phông chữ đầu tiên.

Sử dụng font-size-adjust.

Ví dụ này sử dụng một giá trị duy nhất là số. Giá trị này sẽ điều chỉnh phông chữ bằng cách sử dụng chỉ số phông chữ mặc định ex-height. Đây là tỷ lệ chiều cao x, chiều cao của một chữ thường x trong phông chữ thành cỡ chữ. Bạn cũng có thể chỉ định phông chữ chỉ số được sử dụng. Trong ví dụ tiếp theo, tôi đã chuẩn hoá phông chữ bằng cách sử dụng ch-width từ khoá, ngoài số.

Sử dụng font-size-adjust với chỉ số phông chữ ch-width.

Để xem tất cả các giá trị có thể, hãy xem Tài liệu MDN cho font-size-adjust.

Bạn nên xem xét trang web của mình bằng cách dùng phông chữ dự phòng và xem liệu tinh chỉnh với font-size-adjust có thể giúp những độc giả đang dùng phông chữ dự phòng để có trải nghiệm tốt hơn, đặc biệt là giờ đây tính năng này có mặt ở mọi nơi!