font-display
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Descriptor font-display cho at-rule @font-face xác định cách một font face được hiển thị dựa trên việc nó có được tải xuống hay chưa và khi nào nó sẵn sàng sử dụng.
Cú pháp
/* Giá trị từ khóa */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Giá trị
auto-
Chiến lược hiển thị font được xác định bởi user agent.
block-
Cho font face một khoảng thời gian block ngắn và một khoảng thời gian swap vô hạn.
swap-
Cho font face một khoảng thời gian block cực nhỏ và một khoảng thời gian swap vô hạn.
fallback-
Cho font face một khoảng thời gian block cực nhỏ và một khoảng thời gian swap ngắn.
optional-
Cho font face một khoảng thời gian block cực nhỏ và không có khoảng thời gian swap.
Note:
Trong Firefox, tùy chọn gfx.downloadable_fonts.fallback_delay
và gfx.downloadable_fonts.fallback_delay_short cung cấp thời lượng
của các khoảng thời gian "ngắn" và "cực nhỏ" tương ứng.
Mô tả
Dòng thời gian hiển thị font dựa trên một bộ đếm thời gian bắt đầu vào thời điểm user agent cố gắng sử dụng một font face đã tải xuống nhất định. Dòng thời gian được chia thành ba giai đoạn dưới đây, quyết định hành vi kết xuất của bất kỳ phần tử nào sử dụng font face:
- Giai đoạn block font: Nếu font face chưa được tải, bất kỳ phần tử nào cố gắng sử dụng nó phải kết xuất một font face dự phòng vô hình. Nếu font face tải thành công trong giai đoạn này, nó được sử dụng bình thường.
- Giai đoạn swap font: Nếu font face chưa được tải, bất kỳ phần tử nào cố gắng sử dụng nó phải kết xuất một font face dự phòng. Nếu font face tải thành công trong giai đoạn này, nó được sử dụng bình thường.
- Giai đoạn failure font: Nếu font face chưa được tải, user agent xử lý nó như một tải thất bại gây ra font dự phòng thông thường.
Định nghĩa hình thức
| Related at-rule | @font-face |
|---|---|
| Initial value | auto |
| Computed value | as specified |
Cú pháp hình thức
font-display =
auto |
block |
swap |
fallback |
optional
Ví dụ
Chỉ định font-display dự phòng
@font-face {
font-family: "ExampleFont";
src:
url("/path/to/fonts/example-font.woff") format("woff"),
url("/path/to/fonts/example-font.eot") format("embedded-opentype");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Fonts Module Level 4 # font-display-desc |