决定 Web 字体在加载时的行为可能是一项重要的性能调优技术。借助 @font-face 的新 font-display 描述符，开发者可以根据 Web 字体的加载时间来决定其呈现方式（或回退方式）。
目前字体呈现方面的差异
借助 Web Fonts，开发者可以将丰富的排版样式纳入到其项目中，但代价是，如果用户还没有字体，浏览器就必须花费一些时间下载该字体。由于网络可能会不稳定，因此此下载时间可能会对用户体验产生不利影响。毕竟，如果文字需要花费过长的时间才能显示，没人会在意文字有多漂亮！
为了降低字体下载缓慢带来的一些风险，大多数浏览器都会实现超时功能，超时后会使用后备字体。这是一种非常实用的技术，但遗憾的是，浏览器在实际实现方面存在差异。
| 浏览器 | 超时 | 后备 | 交换 |
|---|---|---|---|
| Chrome 35 及更高版本 | 3 秒 | 是 | 是 |
| Opera | 3 秒 | 是 | 是 |
| Firefox | 3 秒 | 是 | 是 |
| Internet Explorer | 0 秒 | 是 | 是 |
| Safari | 不会超时 | 不适用 | 不适用 |
- Chrome 和 Firefox 的超时时间为 3 秒，超时后，系统会使用后备字体显示文本。如果字体成功下载，最终会发生切换，并使用预期的字体重新渲染文本。
- Internet Explorer 的超时时间为 0 秒，因此会立即呈现文本。如果请求的字体尚不可用，则系统会使用回退字体，并在请求的字体可用后重新渲染文本。
- Safari 没有超时行为（至少不会超出基准网络超时）。
更糟糕的是，开发者在决定这些规则对其应用的影响方面只能发挥有限的作用。注重性能的开发者可能更倾向于使用后备字体来提供更快的初始体验，并仅在用户在后续访问时有机会下载更漂亮的 Web 字体时才使用该字体。使用 Font Loading API 等工具，您或许可以替换某些默认浏览器行为并提升性能，但代价是需要编写大量 JavaScript，这些 JavaScript 必须内嵌到网页中或从外部文件请求，从而导致额外的 HTTP 延迟时间。
为了解决此问题，CSS 工作组提出了新的 @font-face 描述符 font-display 和相应的属性，用于控制可下载字体在完全加载之前的呈现方式。
字体下载时间表
与目前某些浏览器实现的现有字体超时行为类似，font-display 会将字体下载生命周期划分为三个主要阶段。
- 第一个周期是字体块周期。在此期间，如果未加载字体，则任何尝试使用该字体的元素都必须改用不可见的回退字体进行渲染。如果字体在屏蔽期间成功加载，则系统会正常使用该字体。
- 字体切换期会在字体块期之后立即发生。在此期间，如果未加载字体，则任何尝试使用该字体的元素都必须改用回退字体进行渲染。如果字体在换货期内成功加载，系统会正常使用该字体。
- 字体故障期会在字体切换期结束后立即发生。如果此时段开始时字体样式尚未加载，则会被标记为加载失败，从而导致正常的字体回退。否则，系统会正常使用该字体。
了解这些时间段意味着，您可以使用 font-display 来决定字体应如何呈现，具体取决于字体是否已下载以及下载的时间。
哪种 font-display 适合您？
如需使用 font-display 描述符，请将其添加到 @font-face at-rule 中：
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display 目前支持以下值范围 auto | block | swap | fallback | optional。
自动
auto 会使用用户代理使用的任何字体显示策略。大多数浏览器目前采用的默认策略与屏蔽类似。
阻挡
block 会为字体样式分配较短的块时间（在大多数情况下建议为 3 秒）和无限的换货时间。换句话说，如果字体未加载，浏览器会先绘制“不可见”文本，但会在字体加载后立即切换字体。为此，浏览器会创建一个匿名字体，其指标与所选字体类似，但所有字形都不含“墨水”。只有在网页需要以特定字体呈现文本才能正常使用时，才应使用此值。
互换
swap 会为字体样式设置零秒的块周期和无限的换页周期。这意味着，如果未加载字体，浏览器会立即使用回退字体绘制文本，但会在字体加载后立即切换字体。与 block 类似，只有当以特定字体渲染文本对网页至关重要时，才应使用此值，但无论使用哪种字体渲染，都能传达正确的消息。徽标文本非常适合切换，因为使用合理的后备字体显示公司名称即可传达信息，但您最终会使用官方字体。
后备
回退会为字体样式提供极短的屏蔽期（在大多数情况下，建议不超过 100 毫秒）和较短的切换期（在大多数情况下，建议不超过 3 秒）。换句话说，如果字体未加载，系统会先使用回退字体渲染字体，但在字体加载后立即切换字体。不过，如果经过的时间过长，系统将在页面生命周期的其余时间内使用回退字体。回退字体非常适合正文等内容，因为您希望用户尽快开始阅读，并且不希望在新字体加载时因文本移动而干扰用户体验。
可选
可选会为字体样式分配极短的块时间（在大多数情况下，建议设置为 100 毫秒或更短）和零秒的换页时间。与后备字体类似，如果下载的字体只是“有用”，但对体验而言不是至关重要，则此选项非常适合。可选值可让浏览器自行决定是否启动字体下载，它可以选择不执行此操作，也可以选择以低优先级执行此操作，具体取决于它认为对用户最有利的方式。如果用户的网络连接不佳，而拉取字体可能不是最有效的资源利用方式，这种做法会很有用。
浏览器支持
font-display 目前位于桌面版 Chrome 49 中的“实验性 Web 平台功能”标志后面，并已在 Opera 和 Opera for Android 中发布。
演示
请查看示例，试用一下 font-display。对于注重性能的开发者来说，这可以成为您的工具箱中又一款实用工具！