語法
css
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
值
auto-
字型顯示策略由使用者代理定義。
block-
為字型設定一個短的阻塞週期和無限的交換週期。
交換-
為字型設定一個極短的阻塞週期和無限的交換週期。
fallback-
為字型設定一個極短的阻塞週期和短的交換週期。
可選-
為字型設定一個極短的阻塞週期，且沒有交換週期。
注意：在 Firefox 中，偏好設定 gfx.downloadable_fonts.fallback_delay 和 gfx.downloadable_fonts.fallback_delay_short 分別提供了“短”和“極短”週期的持續時間。
描述
字型顯示時間軸基於一個計時器，該計時器在使用者代理嘗試使用給定下載字型的那一刻開始。時間軸分為以下三個階段，這些階段決定了使用該字型的任何元素的渲染行為
- 字型阻塞週期：如果字型未載入，任何嘗試使用它的元素都必須渲染一個不可見的備用字型。如果字型在此期間成功載入，則正常使用它。
- 字型交換週期：如果字型未載入，任何嘗試使用它的元素都必須渲染一個備用字型。如果字型在此期間成功載入，則正常使用它。
- 字型失敗週期：如果字型未載入，使用者代理會將其視為載入失敗，從而導致正常的字型回退。
正式定義
| 相關的 at-rule | @font-face |
|---|---|
| 初始值 | auto |
| 計算值 | 同指定值 |
正式語法
font-display =
auto |
block |
swap |
fallback |
optional
示例
指定回退 font-display
css
@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;
}
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-display-desc |
瀏覽器相容性
載入中…