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

Rachel Andrew

Ngày xuất bản: 23 tháng 7 năm 2024

Tính năng font-size-adjust CSS sẽ ra mắt trên Chrome vào hôm nay và trở thành một phần của Baseline Newly Available. Thuộc tính này có thể giúp ngăn việc bố cục của bạn thay đổi khi phông chữ dự phòng được tải và đảm bảo khả năng đọc của phông chữ dự phòng ở cỡ chữ nhỏ hơn. Thuộc tính font-size-adjust là một phần của Interop 2024, vì vậy, đây là một chiến thắng khác cho 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 đặt ở cùng một kích thước, tuỳ thuộc vào hình dạng và kích thước của các ký tự, văn bản hiển thị có thể chiếm nhiều không gian hơn. Ví dụ: bản minh hoạ sau đây cho thấy văn bản trong Verdana và Arial, cả hai đều được đặt thành 16 pixel.

Văn bản hiển thị ở kích thước 16px trong phông chữ Verdana và Arial.

Sự khác biệt về kích thước là do giá trị tỷ lệ, chiều cao của chữ thường so với chữ hoa trong một phông chữ, thay đổi giữa các phông chữ.

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

Lợi ích của font-size-adjust

Thuộc tính font-size-adjust cho phép bạn điều chỉnh phông chữ dự phòng để phù hợp hơn với phông chữ đầu tiên. Ví dụ sau đây cho thấy hai phông chữ đã hiển thị trước đó, lần này phông chữ thứ hai đã được điều chỉnh để khớ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, một số, để điều chỉnh phông chữ bằng cách sử dụng chỉ số phông chữ mặc định của ex-height. Đây là tỷ lệ giữa chiều cao x, chiều cao của chữ x viết thường trong phông chữ so với cỡ chữ. Bạn cũng có thể chỉ định đơn vị đo phông chữ được sử dụng. Trong ví dụ tiếp theo, tôi đã chuẩn hoá phông chữ bằng từ khoá ch-width, 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ể có, hãy xem tài liệu MDN về font-size-adjust.

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