确定网页字体在加载时的行为，是一项重要的性能调整技巧。借助 @font-face 的新 font-display 描述符，开发者能够根据网页字体的加载时间来决定其网页字体的呈现方式（或回退方式）。
当前字体渲染方面的差异
借助网页字体，开发者可以将丰富的排版整合到自己的项目中，但前提是用户还没有添加某种字体，浏览器就必须花一些时间下载相应字体。由于网络可能不稳定，因此这一下载时间可能会对用户体验产生不利影响。毕竟，如果文本的显示时间过长，没人会在意文本的美观程度！
为降低字体下载速度缓慢的一些风险，大多数浏览器都会实现超时，之后会使用后备字体。这是一种很有用的技术，但遗憾的是，浏览器的实际实现方式有所不同。
| 浏览器 | 超时 | 后备 | 交换 |
|---|---|---|---|
| Chrome 35 及更高版本 | 3 秒 | 是 | 是 |
| Opera | 3 秒 | 是 | 是 |
| Firefox | 3 秒 | 是 | 是 |
| Internet Explorer | 0 秒 | 是 | 是 |
| Safari | 无超时 | 不适用 | 不适用 |
- Chrome 和 Firefox 会有 3 秒钟的超时，在此之后文本将以回退字体显示。如果成功下载了字体，那么最终会发生交换，并使用预期的字体重新渲染文本。
- Internet Explorer 的超时时间为零秒，因此文本会立即呈现。如果所请求的字体尚不可用，则系统会使用回退字体，并在之后在所请求的字体可用时重新渲染文本。
- Safari 没有超时行为（或者至少没有超出基准网络超时的行为）。
更糟糕的是，开发者可以在决定这些规则将如何影响其应用时的控制力有限。注重性能的开发者可能更喜欢使用后备字体的更快的初始体验，并且仅在有机会下载之后，才在后续访问中利用效果更好的网页字体。使用 Font Loading API 等工具可以替换某些默认浏览器行为并提升性能，但代价是需要编写大量 JavaScript，而这些 JavaScript 必须内嵌到页面中或从外部文件请求，从而产生额外的 HTTP 延迟时间。
为帮助解决此问题，CSS 工作组提出了新的 @font-face 描述符 font-display 以及相应的属性，用于控制可下载字体在完全加载前如何呈现。
字体下载时间轴
与某些浏览器目前实现的现有字体超时行为类似，font-display 将字体下载生命周期分为三个主要时间段。
- 第一个时间段是字体阻止期。在此期间，如果字体未加载，则任何尝试使用字体的元素都必须改用不可见的回退字体来渲染。如果字体在阻止期内成功加载，则正常使用字体。
- 字体交换期紧跟在字体阻止期之后。在此期间，如果字体未加载，则任何尝试使用字体的元素都必须改用回退字体来渲染。如果字体在交换期内成功加载，则正常使用字体。
- 字体失败期发生在字体交换期之后。如果字体在此时间段开始时尚未加载，则会被标记为加载失败，从而导致正常的字体回退。否则，将正常使用字体。
了解这些时间段后，您可以使用 font-display 根据是否或何时下载字体，决定字体的呈现方式。
哪种字体显示方式适合您？
如需使用 font-display 描述符，请将其添加到您的 @font-face at-rules：
@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 的默认策略。
阻挡
block 可以为字体指定较短的屏蔽期（在大多数情况下，建议为 3 秒）和无限的交换期。换言之，字体未加载时，浏览器会先绘制“不可见”的文本，然后在字体加载后立即交换字体。为此，浏览器会创建一个指标与所选字体相似的匿名字体，但所有字形都不含“墨水”。仅当需要以特定字体呈现文本以使页面可用时，才应使用此值。
交换空间
swap 可以为字体指定零秒的阻止期，以及无限的交换期。 这意味着，字体未加载时，浏览器会立即通过回退字体来绘制文本，但在字体加载后立即交换字体。与 block 类似，只有当以特定字体呈现文本对网页来说很重要时，才应使用此值，但以任何字体呈现都能得到正确的消息。徽标文字非常适合进行交换，因为使用合理的回退字体显示公司名称即可传达消息，但您最终会使用官方字体。
后备
fallback 为字体提供极短的阻止期（在大多数情况下，建议为 100 毫秒或更短）以及较短的交换期（在大多数情况下，建议为 3 秒）。换言之，字体未加载时，首先通过回退字体来渲染字体，但在字体加载后立即交换字体。不过，如果经过了太长时间，网页在其余整个生命周期内都将使用回退机制。对于正文文本等内容，如果您希望用户尽快开始阅读，并且不希望用户在加载新字体时四处移动文本，从而干扰用户体验，则后备元素是很好的候选对象。
可选
optional 可以为字体指定极短的阻止期（在大多数情况下，建议设置为 100 毫秒或更短），以及 0 秒的交换期。与后备功能类似，当下载的字体更像是“锦上添花”但对体验并不重要时，这是一个不错的选择。如果使用 optional 值，浏览器可以自行决定是否启动字体下载；浏览器可能会根据自身认为对用户最有帮助的情况，选择不这样做或以低优先级执行字体下载。如果用户的网络连接信号较弱，并且下载字体可能不是利用资源的最佳方式，那么这样做很有用。
浏览器支持
font-display 目前在桌面版 Chrome 49 中处于“实验性网络平台功能”标志后面，并已在 Android 版 Opera 和 Opera 中推出。
演示
查看示例，试用 font-display。对于注重性能的开发者而言，它可以成为另一个实用工具！