font-display

语法

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

值

auto

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

block

为字体提供一个短的阻塞周期（通常约为 3 秒）和无限的交换周期。

交换

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

fallback

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

可选

为字体提供一个极短的阻塞周期且没有交换周期。

描述

@font-feature-values 的 font-display 描述符决定了字体显示时间线；它通过为相同 font-family 名称的 @font-face 设置默认的 font-display 值来做到这一点。当 @font-face 中省略 font-display 时，用户代理首先查找通过 @font-feature-values 为相关字体系列设置的 font-display 值。如果未找到任何值，用户代理将对 font-display 使用 auto 值，在这种情况下，用户代理将确定字体显示策略。

字体显示时间线基于一个计时器，该计时器在用户代理尝试使用特定的下载字体时开始。时间线分为三个时期，如下所示。这些时期决定了使用该字体的任何元素的渲染行为。

• 字体阻塞期：如果字体未加载，尝试使用该字体的元素将使用不可见的备用字体进行渲染。浏览器会阻塞可见文本渲染，根据备用字体的度量为待显示的文本留出空间。在阻塞期内，文本不可见。在阻塞期结束时，如果字体仍未加载，文本将以备用字体渲染。

• 字体交换期：交换期发生在阻塞期之后（如果有的话），并且在字体尚未成功加载的情况下。尝试使用尚未加载字体的元素将使用下一个可用的备用字体进行渲染。先前不可见的备用字体被绘制到屏幕上。如果字体在交换期内成功加载，则以备用字体渲染的文本将更新（或交换）为新加载的字体。此步骤会触发重绘。

• 字体失败期：如果在交换期结束时或阻塞期结束时（如果像 optional 一样没有交换期）字体仍未加载，用户代理会将该字体视为加载失败。结果，内容将以备用字体可见。

font-display 描述符允许您为所有 @font-face 规则设置默认显示策略，包括那些不受作者控制的规则，例如第三方 @font-face 规则。当通过 @font-feature-values 设置 font-display 值时，它将成为默认的 font-display 值，并应用于整个字体系列。但是，在单个 @font-face 块中定义的任何 font-display 值都将覆盖此默认值，但仅适用于定义了该描述符的那些块。

示例

@font-feature-values "Leitura" {
  font-display: swap;
  @swash {
    fancy: 1;
  }
}

此示例中的 font-display 描述符将“Leitura”字体的默认 font-display 值设置为 swap，适用于所有 @font-face 块。现在可能存在多个 @font-face 块，为单个字体系列导入多个字体文件。如果其中一个 @font-face 块包含 font-display 描述符，则指定的值将仅用于该特定字体文件。所有其他不包含 font-display 描述符的块将默认为 swap，而不是用户代理的标准默认值 auto。

规范

浏览器兼容性

目前没有浏览器支持此功能。

另见

• font-display 描述符，用于 @font-face at-rule
• CSS 字体模块