前言

字体优化，主要用到font-display，是CSS中新添加的属性。font-display 属性决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的。

什么是FOIT和FOUT

浏览器加载字体，字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
FOIT(Flash Of Invisible Text): 大多数浏览器在自定义字体还未下载之前会先隐藏文本
FOUT(Flash of Unstyled Text): 无样式文本闪烁
因此为了提高用户体验，font-display是很好的选择。

字体显示时间线

字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。

字体阻塞周期

如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。

字体交换周期

如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。

字体失败周期

如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。

属性值

auto
字体显示策略由用户代理定义。
典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。

block
为字体提供一个短暂的阻塞周期和无限的交换周期。
swap
为字体提供一个非常小的阻塞周期和无限的交换周期。
后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。

fallback
为字体提供一个非常小的阻塞周期和短暂的交换周期。
需要使用自定义字体渲染的文本会在较短的时间(100ms)不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。

optional
为字体提供一个非常小的阻塞周期，并且没有交换周期。

image.png

例子

@font-face {
  font-family：ExampleFont;
  src：url（/path/to/fonts/examplefont.woff）format（'woff'），
       url（/path/to/fonts/examplefont.eot）format（'eot'）;
  font-weight：400;
  font-style：normal;
  font-display：swap;
}