语法

front-display: auto | block | swap | fallback | optional | initial | inherit;

@font-face {
  font-family: 'MyWebFont';
  /* Define the custom font name */
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  /* Define where the font can be downlaoded */
  font-display: optional;
}

font-display 属性定义了浏览器如何下载和显示字体文件。
此属性具有以下值：

• auto
• block
• swap
• fallback
• optional

以前的排版仅限于本地字体，其中唯一可用的字体是称为“网络安全”的字体。
然后是@font-face 规则，允许将字体文件上传到服务器并编写一组规则命名字体并告诉浏览器其中下载文件。

它产生了允许使用自定义字体的服务。
但是这些自定义字体文件可能会很大并减少加载时间。

还有一个与 FOUT（“无样式文本的闪烁”）有关的问题。
浏览器会在下载自定义字体时显示系统字体。
这引起了人们的关注，因为网页设计师将其视为用户体验劫持。
今天的浏览器通常会在下载自定义字体之前隐藏文本，这被称为 FOIT（“不可见文本的闪光”）。

但是上面提到的方法都不是很好。
相反，现在有 font-display 属性告诉浏览器我们喜欢什么：FOUT 或者 FOIT。

CSS font-display 属性值说明