优化远程字体的显示：font-display属性

当网页中用到远程字体时，需要考虑网络因素导致的字体加载延时问题。一般会有一个空档期：文档加载完毕但字体文件尚未完成加载解析，空档期内如何规划网页中文本的渲染呢？这就要用到一个属性：font-display了。

属性介绍

这个属性指定了文档在远程字体下载和可用时的展示策略。如果你的网站中用到了远程字体:

@ font-face {
  font-family: XXXX;
  src: url（/path/to/fonts/examplefont.woff）format（'woff'）;

关于远程字体渲染策略，有三个部分：

• 阻塞期：表示浏览器会block文档以等待字体的下载。阻塞期字体无法顺利加载时，浏览器会使用备选字体
• 交换期：当字体在交换期完成加载时，需要把上一步渲染的备选字体替换为目标字体
• 失败期：上述周期内无法下载字体则自动适应回退字体。

这里我们重点关注前两个，阻塞期、交换期的不同时长的组合对应了font-display属性的不同值：

• block：表示文档会block一段时间（阻塞期大概3s）来等待远程字体文件的下载，该时间内字体如没有完成下载，使用备选字体，等远程字体下载完毕后再进行替换。
• swap：表示文档不会block(极短的阻塞期< 1s)，直接使用备选字体，远程字体下载完毕后再进行替换。
• fallback：表示文档不会block(极短的阻塞期< 1s)，直接使用备选字体，并且在交换期（大概是2s）内下载完毕则进行字体替换，否则放弃使用远程字体。
• optional：表示文档不会block(极短的阻塞期< 1s)，这么短时间内字体完成加载则使用字体否则放弃使用。
• auto：自动模式，由浏览器决定（chrome下行为跟swap类似）

应用场景分析

分析完属性的特点，再来分析一下它的应用场景。

如果想你的网站尽可能优先显示选用的字体，可以使用block属性值：它会block一段时间，等字体文件下载解析完毕再渲染文本，不会因生硬的字体切换带来不舒服的视觉体验。保证了文本视觉的一致性。

如果想你的网站尽可能保持文本可见，可以使用swap属性值：它会先用备选字体渲染文本，等你的字体加载好再替换。保证了文本的可见性。

还有一种情况就是所选的字体的缺席并不会带来很大的体验问题，换句话说：该字体并没有特别重要，那可以选择fallback值。不过这种场景不多。

一般情况下,swap的使用场景会更多一些。

总结

文本介绍了与远程字体相关的文本渲染，为了更好的观察这些值的区别，写了一个观察工具：font-display-testing ，可通过设置字体文件的加载延时和不同的font-display来理解这些值的区别：