font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

font-display 属性决定了一个 @font-face 在不同的下载时间和可用时间下是如何展示的。

字体显示时间轴

字体显示时间线基于一个计时器,该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段,在这三个时间段中指定使用字体的元素的渲染行为。

字体阻塞周期

如果未加载字体,任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载,则正常使用它。

字体交换周期

如果未加载字体,任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载,则正常使用它。

字体失败周期

如果未加载字体,用户代理将其视为导致正常字体回退的失败加载。

Related at-rule@font-face
初始值auto
计算值as specified

语法

css
/* 关键字值 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

属性值

auto

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

block

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

swap

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

fallback

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

optional

为字体提供一个非常小的阻塞周期,并且没有交换周期。

形式化语法

font-display = 
auto |
block |
swap |
fallback |
optional

例子

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;
}

规范

Specification
CSS Fonts Module Level 4
# font-display-desc

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见