CSS at 规则 @font-face 的描述符 font-display 根据字体是否以及何时下载和可以使用字体来确定字体的显示方式。
当用户代理尝试使用给定的下载字体时，一个时间开始，这决定了字体显示时间线。此时间线分为三个时期，这三个时期决定了使用此字体的元素的呈现行为：
- 字体块周期：当任何元素尝试使用未加载的字体时，必须呈现不可见的回退字体。在此期间成功加载字体后，将正常使用。
- 字体交换周期：当任何元素尝试使用未加载的字体时，必须呈现回退字体。在此期间成功加载字体后，将正常使用。
- 字体失败期：当字体未加载时，用户代理会将其视为加载失败，从而导致正常的字体回退。
可能的值
CSS 描述符 font-display 可以具有以下值之一：
- auto：用户代理定义字体显示的策略。
- block：字体被赋予一个短暂的块周期和无限交换周期。
- swap：字体被赋予一个非常短的块周期和无限的交换周期。
- fallback：字体表面被赋予一个非常短的阻止期和短暂的交换期。
- optional：字体被赋予极短的阻止期和无交换期。
注意：首选项 gfx.downloadable_fonts.fallback_delay 和 gfx.downloadable_fonts.fallback_delay_short 指定了 Firefox 中短周期和极短周期的持续时间。
语法
font-display: auto | block | swap | fallback | optional;
CSS font-display - auto 值
当 font-display 作为 auto 传递时，它会按照用户代理的定义呈现输出。在以下示例中，font-family 是 Sansation Light Font，因此 h1 元素中的文本将以指定的字体呈现。
<html>
<head>
<style>
@font-face {
font-family: "Sansation Light Font";
src: url(font/SansationLight.woff);
font-display: auto;
}
h1{
font-family: "Sansation Light Font";
text-decoration-line: underline;
color: green;
}
</style>
</head>
<body>
<h1>font-display: auto</h1>
</body>
</html>
CSS font-display - optional 值
以下示例演示了 font-display： optional 的用法：
<html>
<head>
<style>
@font-face {
font-family: "Sansation Light Font";
src: url(font/SansationLight.woff);
font-display: optional;
}
h1{
font-family: "Sansation Light Font";
text-decoration-line: underline;
color: green;
}
</style>
</head>
<body>
<h1>font-display: optional</h1>
</body>
</html>
CSS font-display - block 值
以下示例演示了 font-display： block 的用法：
<html>
<head>
<style>
@font-face {
font-family: "Sansation Light Font";
src: url(font/SansationLight.woff);
font-display: block;
}
h1{
font-family: "Sansation Light Font";
text-decoration-line: underline;
color: green;
}
</style>
</head>
<body>
<h1>font-display: block</h1>
</body>
</html>
