font-width

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Note: Descriptor font-width là phiên bản hiện đại thay thế cho descriptor font-stretch, là một alias kế thừa. Mặc dù font-width là tên được ưu tiên trong đặc tả, nhưng font-stretch hiện có hỗ trợ trình duyệt rộng hơn. Xem ví dụ fallback và bảng tương thích trình duyệt để biết chi tiết.

Descriptor font-width trong CSS cho phép tác giả chỉ định kiểu dáng bình thường, thu hẹp hoặc mở rộng cho các phông chữ được khai báo trong quy tắc at-rule @font-face.

Với một họ phông chữ cụ thể, tác giả có thể tải về các font face tương ứng với các kiểu dáng khác nhau của cùng họ phông chữ, rồi sử dụng descriptor font-width để chỉ định rõ ràng độ rộng của font face đó. Các giá trị descriptor font-width có sẵn giống với các giá trị của thuộc tính font-width tương ứng.

Cú pháp

css

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

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

Descriptor font-width 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-width, 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ố:

Từ khóa	Phần trăm
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

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.

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

Value not found in DB!

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-width

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-width với các từ khóa và phần trăm khác nhau.

html

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

css

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

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

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: 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;
}

Cung cấp fallback font-stretch

Vì font-width chưa được hỗ trợ rộng rãi trên trình duyệt, bạn có thể muốn bao gồm descriptor font-stretch kế thừa làm fallback. Đặt font-stretch trước font-width để các trình duyệt hỗ trợ sử dụng descriptor hiện đại:

css

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-stretch: condensed; /* for browsers that don't support font-width */
  font-width: condensed;
}

Note: Bạn có thể tự động hóa mẫu fallback này bằng plugin postcss-preset-env cho PostCSS, bao gồm biến đổi postcss-font-width-property để chuyển đổi khai báo font-width thành font-stretch tự động.

Đặc tả

Thông số kỹ thuật
CSS Fonts Module Level 4 # descdef-font-face-font-width

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

Xem thêm

Descriptor alias kế thừa font-stretch với hỗ trợ trình duyệt tốt hơn
Descriptor font-display
Descriptor font-family
Descriptor font-weight
Descriptor font-style
Thuộc tính font-feature-settings
Descriptor font-variation-settings
Descriptor src
Descriptor unicode-range

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này