font-display

font-display 描述符用于 @font-face at-rule 确定字体字体的显示方式，具体取决于字体是否下载以及何时下载并可供使用。

语法

css
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

值

auto

字体显示策略由用户代理定义。

block

为字体字体提供一个短暂的阻塞期和无限的交换期。

swap

为字体字体提供一个极小的阻塞期和无限的交换期。

fallback

为字体字体提供一个极小的阻塞期和短暂的交换期。

optional

为字体字体提供一个极小的阻塞期，没有交换期。

注意：在 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/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

规范

规范
CSS 字体模块级别 4
# font-display-desc

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅