font-stretch

Cú pháp

/* Giá trị đơn */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Nhiều giá trị */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

Descriptor font-stretch có thể nhận một giá trị từ danh sách bên dưới.

Giá trị

normal

Chỉ định font face có độ rộng bình thường.

semi-condensed, condensed, extra-condensed, ultra-condensed

Chỉ định font face thu hẹp hơn bình thường, trong đó ultra-condensed là thu hẹp nhất.

semi-expanded, expanded, extra-expanded, ultra-expanded

Chỉ định font face mở rộng hơn bình thường, trong đó ultra-expanded là mở rộng nhất.

<percentage>

Giá trị <percentage> từ 50% đến 200% (bao gồm cả hai đầu). Giá trị âm không được phép dùng cho descriptor này.

Trong các phiên bản trước của đặc tả font-stretch, descriptor chỉ chấp nhận chín giá trị từ khóa. CSS Fonts Level 4 mở rộng cú pháp để chấp nhận thêm giá trị <percentage>. Điều này cho phép variable font cung cấp sự biến đổi liên tục về độ rộng ký tự. Với TrueType hoặc OpenType variable font, biến thể wdth được dùng để thực hiện độ rộng thay đổi.

Nếu phông chữ không cung cấp font face khớp chính xác với giá trị đã cho, các giá trị nhỏ hơn 100% sẽ ánh xạ sang font face thu hẹp, còn các giá trị lớn hơn hoặc bằng 100% sẽ ánh xạ sang font face mở rộng.

Ánh xạ từ khóa sang số

Bảng dưới đây cho thấy sự ánh xạ giữa các giá trị từ khóa và phần trăm số:

Variable font

Hầu hết các phông chữ có một độ rộng cụ thể tương ứng với một trong các giá trị từ khóa. Tuy nhiên, variable font có thể hỗ trợ một dải độ rộng với độ chi tiết cao, cho phép nhà thiết kế kiểm soát tốt hơn độ rộng được chọn. Vì vậy, dải phần trăm rất hữu ích.

Với TrueType hoặc OpenType variable font, biến thể wdth được dùng để thực hiện độ rộng glyph thay đổi.

Khả năng tiếp cận

Người mắc chứng khó đọc và các vấn đề nhận thức khác có thể gặp khó khăn khi đọc phông chữ quá thu hẹp, đặc biệt nếu phông chữ có tỷ lệ tương phản màu thấp.

• MDN Giải thích WCAG, Hướng dẫn 1.4
• Hiểu Tiêu chí Thành công 1.4.8 | W3C Hiểu WCAG 2.0

Định nghĩa hình thức

Cú pháp hình thức

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded      

Ví dụ

Đặt dải phần trăm cho font-stretch

Ví dụ dưới đây sử dụng phông chữ League Mono. Nó tổng hợp các họ phông chữ khác nhau từ cùng một tệp phông chữ bằng cách sử dụng descriptor font-stretch với các từ khóa và phần trăm khác nhau.

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-condensed; /* same as 50% */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: 100%; /* same as normal */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-expanded; /* same as 200% */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

Đặc tả

Tương thích trình duyệt

Xem thêm

• Descriptor hiện đại font-width, thay thế font-stretch
• Descriptor font-display
• Descriptor font-family
• Descriptor font-weight
• Descriptor font-style
• Descriptor font-feature-settings
• Descriptor font-variation-settings
• Descriptor src
• Descriptor unicode-range