Phông chữ dự phòng ổn định về hình ảnh

Khi tải phông chữ web, các phông chữ này thường thay thế một phông chữ dự phòng có kích thước khác, ngay cả khi cả hai đều được đặt thành cùng một font-size. Điều này gây ra hiện tượng "thay đổi bố cục" (Mức thay đổi bố cục tích luỹ) và có thể khiến văn bản không đọc được nếu chữ thường của phông chữ dự phòng (chiều cao x) khác biệt đáng kể so với phông chữ ưu tiên.

Thuộc tính font-size-adjust giải quyết vấn đề này bằng cách chuẩn hoá kích thước phông chữ dựa trên một chỉ số cụ thể (thường là chiều cao x), đảm bảo văn bản chiếm cùng một không gian hình ảnh bất kể phông chữ nào đang hoạt động.

Các bước triển khai

1. Xác định tỷ lệ khung hình của phông chữ bạn muốn dùng

Để chuẩn hoá phương án dự phòng, bạn cần có "giá trị khung hình" (tỷ lệ giữa chữ cái viết thường và cỡ chữ) của phông chữ chính.

• Tự động khám phá (Nên dùng): Sử dụng từ khoá from-font để cho phép trình duyệt trích xuất tỷ lệ từ phông chữ chính trên web của bạn.
• Tính toán thủ công: Nếu biết giá trị cụ thể (ví dụ: 0,545 cho Verdana), bạn có thể cung cấp trực tiếp giá trị đó để kiểm soát chính xác hơn.

2. Áp dụng font-size-adjust cho vùng chứa văn bản

Áp dụng thuộc tính cho phần tử hoặc vùng chứa mẹ. Điều này đảm bảo rằng nếu phông chữ chính không tải được hoặc đang trong quá trình tải, thì phông chữ dự phòng sẽ được điều chỉnh theo tỷ lệ để phù hợp với kích thước hình ảnh của phông chữ chính.

.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. (Không bắt buộc) Điều chỉnh cho các chỉ số cụ thể

Mặc dù chiều cao x là giá trị mặc định và phổ biến nhất, nhưng bạn có thể chuẩn hoá theo các chỉ số khác như cap-height (hữu ích cho tiêu đề viết hoa toàn bộ) hoặc ch-width (hữu ích cho phông chữ đơn cách).

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

4. Xác minh độ ổn định về hình ảnh

Đảm bảo rằng giá trị font-size-adjust căn chỉnh đúng cách cho phương án dự phòng. Bạn có thể kiểm tra điều này bằng cách tạm thời chặn phông chữ web hoặc điều chỉnh nội dung khai báo font-family trong Công cụ cho nhà phát triển của trình duyệt và xác minh rằng bố cục văn bản vẫn ổn định.

Chiến lược dự phòng

Trong các trình duyệt không hỗ trợ font-size-adjust, phông chữ sẽ được hiển thị theo tỷ lệ mặc định. Điều này có thể dẫn đến việc thay đổi bố cục hoặc thay đổi khả năng đọc trong quá trình hoán đổi phông chữ.

Để giảm thiểu vấn đề này mà không cần font-size-adjust, bạn có thể sử dụng các chỉ số mô tả @font-face size-adjust, ascent-override và descent-override để điều chỉnh phông chữ dự phòng theo cách thủ công, mặc dù các chỉ số này phức tạp hơn để tính toán so với một giá trị font-size-adjust.