font-display和@font-face

编写网站时总会用到一些站外资源，字体就是其中之一，css3中支持了Web Font来允许使用其他字体，但是加载过程中会出现一些意外情况。此刻就需要设置font-display来应对。

font-display一般和@font-face一起使用，因为引用外部字体时可能出现加载慢或者加载失败的情况，如果不单独设置处理方式则会产生页面文字延迟加载甚至直接不出现的情况。

font-display属性：

auto:默认值。典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。
swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。在大多数情况下，这就是我们所追求的效果。之前提及到的JavaScript脚本实现的功能就基本和这个是一致的。

block 。在字体加载前，会使用备用字体渲染，但是显示为空白，使得它一直处于阻塞期，当字体加载完成之后，进入交换期，用下载下来的字体进行文本渲染。不过有些浏览器并不会无限的处于阻塞期，会有超时限制，一般在 3 秒后，如果阻塞期仍然没有加载完字体，那么直接就进入交换期，显示后备字体（而非空白），等字体下载完成之后直接替换。
fallback:这个可以说是auto和swap的一种折中方式。需要使用自定义字体渲染的文本会在较短的时间（100ms according to Google ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。
optional:效果和fallback几乎一样，都是先在极短的时间内文本不可见，然后再加载无样式的文本。不过optional选项可以让浏览器自由决定是否使用自定义字体，而这个决定很大程度上取决于浏览器的连接速度。如果速度很慢，那你的自定义字体可能就不会被使用。

此处贴上一个示例：

@font-face {
    font-family: 'vipLevel';
    src: url('/src/static/ttf/优设标题黑.ttf');
    font-display: swap;
}

此外，还可以通过设置多个font-family值来尽量避免出现不兼容或者加载失败的情况。

{ font-family: "Open Sans Regular", "Helvetica", "Arial", sans-serif; }

原理如下：

浏览器加载 Web Fonts 的时期

浏览器加载 Web Fonts 时按顺序会有三个时期：

阻塞期（Block Period）。在此期间如果字体没有加载完成，那么浏览器会使用 font-family 指定的字体列表中的后备字体（Fallback）进行渲染，但是显示为空白，也就是对于用户是不可见的。在此期间字体加载完成之后才能正常显示该字体。

交换期（Swap Period）。跟阻塞期类似，但是在这个时期内，它会在字体加载时，先用后备字体渲染文本并显示出来（而不是显示空白），在此期间字体加载完成之后才能正常的显示该字体。

失败期（Failure Period）。如果字体加载失败，则使用后备字体显示文本。