决定网页字体在加载时的行为
重要的性能微调技巧新的 font-display 描述符，用于
@font-face 可让开发者决定如何呈现（或回退）其网页字体，
具体取决于它们的加载时间
当前字体渲染方面的差异
网页字体使开发者能够将丰富的排版融入到 但前提是用户尚未拥有 那么浏览器必须花些时间下载它。因为广告网络 不稳定，这一下载时间可能会对用户的 体验毕竟，如果您的文本多么美观， 要花费大量时间才能展示！
为了降低字体下载缓慢的风险，大多数浏览器都会实施 超时之后将使用后备字体。这是一种非常实用的技巧 遗憾的是，各个浏览器在实际实现中会有所不同。
| 浏览器 | 超时 | 后备 | 交换 |
|---|---|---|---|
| Chrome 35 及更高版本 | 3 秒 | 是 | 是 |
| 歌剧 | 3 秒 | 是 | 是 |
| Firefox | 3 秒 | 是 | 是 |
| Internet Explorer | 0 秒 | 是 | 是 |
| Safari | 无超时 | 不适用 | 不适用 |
- Chrome 和 Firefox 浏览器会有 3 秒钟的超时，在此之后文字会显示 替换为后备字体如果成功下载了字体，那么最终 并以预期的字体重新渲染文本。
- Internet Explorer 的超时时间为零秒 呈现。如果请求的字体尚不可用，则使用后备字体，并且 请求字体可用后，系统会重新渲染相应文本。
- Safari 没有超时行为（或者至少没有超出基准网络的行为） 超时）。
更糟糕的是，开发者在决定 都会影响其应用注重性能的开发者可能更倾向于 以便获得使用后备字体的更快初始体验 在有机会下载之后，在后续访问中访问该字体。 使用 Font Loading API 等工具，可以覆盖某些 默认浏览器行为并实现性能提升，但问题在于 也就是编写大量 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 可以为字体提供较短的屏蔽期（在大多数情况下，建议为 3 秒） 以及无限的交换期。也就是说，浏览器会绘制“不可见的”文本 如果字体未加载，最初就会换入字体， 。为此，浏览器会创建一个带有指标的匿名字体 与所选字体相似，但所有字形都不含“墨水”。 只有在以特定字体呈现文本时才应使用此值 是网页可以使用的必要条件。
互换
swap（交换）为字体指定零秒的阻止期，以及无限的交换期。 这意味着，如果字体显示不正常，浏览器会立即 字体，但会在字体加载后立即交换字体。与 block 类似， 只有当以特定字体呈现文本时， 但以任何字体呈现，都能获得 信息。徽标文字很适合进行交换，因为 使用适当的备选名称将信息传达给客户，但您 最终还是会使用官方字体。
后备
fallback 为字体提供极短的阻塞期（100 毫秒或更短时间） 和较短的交换期（建议为 3 秒） ）。换言之，字体在 如果字体未加载，则会先交换字体，但字体加载后立即交换字体。不过， 如果播放时间过长，则系统将为网页的其余部分使用后备广告 整个有效期。后备非常适合用于 希望用户尽快开始阅读，不想打扰 从而获得更理想的体验。
可选
optional 可以为字体指定极短的阻止期（100 毫秒或更短 （大多数情况下推荐）和零秒交换期。与后备广告类似， 这适用于下载字体更“锦上添花”的情况 但对用户体验而言并不重要。optional 值可以留给 来决定是否启动字体下载，它可能不会选择 或者，根据其预想，可能将其优先级较低 为用户带来最佳体验这在用户正在访问网络的情况下非常有用 网络连接信号较弱并下拉字体可能并不是利用资源的最佳方式。
浏览器支持
font-display 目前落后于实验性 Web 平台功能标志
适用于桌面版 Chrome 49，并且适用于 Android 版 Opera 和 Opera。
演示
请参阅示例，
font-display击球。对于注重性能的开发者来说
工具条！