FontFace: display 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流浏览器均已支持。

注意:此功能在 Web Workers 中可用。

FontFace 接口的 display 属性决定了字体面部如何显示,这取决于字体是否已下载并准备好使用。此属性等同于 CSS 的 font-display 描述符。

使用此属性时,字体加载有一个包含三个时期的时间线。前两个时期的长度取决于属性值和用户代理。 (见下文。)

阻塞期 (block period)

浏览器会不可见地准备一个备用字体。如果字体面部在此期间加载,它将被用于显示文本,显示完成。

交换期 (swap period)

如果字体面部仍未加载,将显示备用字体。当字体面部加载后,备用字体将被下载的字体替换。

失败期 (failure period)

如果字体面部仍未加载,将显示备用字体,并且不会发生替换。

一个字符串,具有以下值之一。

auto

使用用户代理提供的字体显示策略。

block

为字体面部提供一个短暂的阻塞期和一个无限的交换期。规范建议阻塞期为 3 秒,但这可能因浏览器而异。

fallback

为字体面部提供一个短暂的阻塞期和一个短暂的交换期。规范建议阻塞期为 100 毫秒或更短,交换期为 3 秒,但这可能因浏览器而异。

可选

为字体面部提供一个短暂的阻塞期,没有交换期。规范建议为 100 毫秒或更短,但这可能因浏览器而异。

交换

为字体面部提供 0 秒的阻塞期和无限的交换期。

规范

规范
CSS 字体加载模块等级 3
# dom-fontface-display

浏览器兼容性