font-display

对于 @font-feature-values at-规则，**font-display** 描述符用于设置字体面的默认显示值，该值基于是否以及何时下载字体面。在 @font-feature-values 块中为 font-display 描述符设置值，将为具有相同 font-family 值的所有字体设置 @font-face at-规则的 font-display 描述符的默认值。

语法

css

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

值

auto: 字体显示策略由用户代理定义。
block: 为字体面提供一个短暂的阻塞时间段，通常约为 3 秒，以及无限的交换时间段。
swap: 为字体面提供一个极短的阻塞时间段和无限的交换时间段。
fallback: 为字体面提供一个极短的阻塞时间段和一个短暂的交换时间段。
optional: 为字体面提供一个极短的阻塞时间段，没有交换时间段。

描述

用于 @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-display 值通过@font-feature-values 设置时，它将成为默认的font-display 值，并应用于整个字体族。但是，在单个@font-face 块中定义的任何font-display 值将覆盖此默认值，但仅限于定义了该描述符的块。

示例

css

@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。

规范

规范
CSS 字体模块第 4 级 # descdef-font-feature-values-font-display

浏览器兼容性

目前还没有浏览器实现此功能。

另请参阅

font-display 描述符，适用于 @font-face at 规则
CSS 字体模块