当网页中用到远程字体时，需要考虑网络因素导致的字体加载延时问题。一般会有一个空档期：文档加载完毕但字体文件尚未完成加载解析，空档期内如何规划网页中文本的渲染呢？这就要用到一个属性：
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来理解这些值的区别：