font-display描述符确定字型如何根据是否以及何时它被下载并准备使用显示。

字体显示时间轴

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

字体块周期
如果未加载字体,任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体表面已成功加载,则正常使用它。
字体交换期
如果未加载字体,任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体表面已成功加载,则正常使用它。
字体失败期
如果未加载字体,用户代理将其视为导致正常字体回退的失败加载。

Related at-rule@font-face
初始值auto
适用媒体visual
计算值as specified
正规顺序the unique non-ambiguous order defined by the formal grammar

句法

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

auto
字体显示策略由用户代理定义。
block
给字体面临一个短暂的周期和无限的交换周期。
swap
为字体提供了一个非常小的块周期和无限的交换周期。
fallback
为字体提供了一个非常小的块周期和短暂的交换周期。
optional
为字体提供了一个非常小的块周期并且没有交换周期。

形式语法

[ auto | block | swap | fallback | optional ]

例子

@ 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 Fonts Module Level 4
font-display
Working Draft 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 60Edge No support NoFirefox Full support 58IE No support NoOpera Full support 47Safari Full support YesWebView Android Full support 60Chrome Android Full support 60Edge Mobile No support NoFirefox Android Full support 58Opera Android Full support 47Safari iOS Full support YesSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

文档标签和贡献者

此页面的贡献者: Lim, tiger102010
最后编辑者: Lim,