语法
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 |
浏览器兼容性
加载中…