Phông chữ kết hợp ổn định về mặt hình ảnh

Khi kết hợp nhiều bộ phông chữ, chẳng hạn như khi chèn đoạn mã cùng dòng hoặc chuyển đổi bộ phông chữ cho các giao diện khác nhau, sự khác biệt về "chiều cao x" (chiều cao của chữ cái viết thường) có thể khiến một phông chữ trông nhỏ hơn hoặc lớn hơn nhiều so với phông chữ khác. Điều này có thể dẫn đến khả năng đọc kém và thay đổi bố cục.

Thuộc tính font-size-adjust cho phép bạn chuẩn hoá kích thước hình ảnh của văn bản bằng cách điều chỉnh cỡ chữ dựa trên một chỉ số phông chữ cụ thể (thường là chiều cao x).

Các bước triển khai

1. BẮT BUỘC: Áp dụng font-size-adjust cho các phần tử cần có phông chữ nhất quán, chẳng hạn như vùng chứa sử dụng phông chữ web hoặc khối có nhiều bộ phông chữ.
2. BẮT BUỘC: Sử dụng từ khoá from-font trên các phần tử để tự động điều chỉnh cỡ chữ trong các phần tử lồng nhau cho phù hợp với tỷ lệ của phông chữ chính.
3. BẮT BUỘC: Sử dụng một giá trị ghi đè tỷ lệ khung hình dạng số cụ thể cho font-size-adjust (ví dụ: font-size-adjust: 0.5) để chuẩn hoá tỷ lệ một cách độc lập khi tỷ lệ phông chữ cần dựa vào là từ các giao diện khác nhau.

Ví dụ: Tự động chuẩn hoá chiều cao x

Sử dụng from-font là phương pháp hiệu quả nhất. Thuộc tính này trích xuất tỷ lệ khung hình của chiều cao x từ phông chữ đầu tiên có sẵn và áp dụng tỷ lệ đó cho phông chữ trong các phần tử con.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Ví dụ: Chỉ định chiều cao x cụ thể

Khi phông chữ cần điều chỉnh không phải là phông chữ con của phông chữ làm cơ sở cho kích thước, hãy chỉ định một giá trị để điều chỉnh chiều cao x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

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

BẮT BUỘC: Trong các trình duyệt không hỗ trợ font-size-adjust, phông chữ sẽ hiển thị ở giá trị font-size tự nhiên. Bạn phải cung cấp một chiến lược dự phòng hợp lệ cho các trình duyệt không hỗ trợ bằng cách sử dụng khối @supports để giảm thiểu vấn đề này:

• Sử dụng @supports not (font-size-adjust: from-font) để phát hiện tính năng hỗ trợ font-size-adjust và cung cấp kiểu dự phòng (ví dụ: điều chỉnh chiều cao dòng hoặc cỡ chữ).
• Chọn phông chữ có chiều cao x tương tự như phông chữ chính của bạn.
• Áp dụng các cơ chế ghi đè font-size và line-height cụ thể cho các bộ phông chữ thay thế và lồng ghép.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}