前端字体渲染font-face font-display

浏览器对字体渲染大体思路

 下载字体需要时间，故设定一个超时时间（3s）
 超时前先用备用字体渲染
 若在3s内下载成功，则用这个字体替换备用字体
 否则，使用备用字体。但不同浏览器策略有差异

• Chrome和Firefox 超时时间为 3 秒
• IE浏览器超时时间为 0 秒，即如果本地没有该字体，则直接使用备用字体
• Safari一直等待下载，直到网络超时

这些不同策略将导致展示不受控制，甚至影响性能。所以出现了@font-face规则，以及其中的font-display

@font-face规则，font-display
`

@ 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：fallback;
}

`

font-display可能的值如下

`auto`
字体显示策略由用户代理定义。

`block`
为字体提供一个短暂的阻塞周期（3s）和无限的交换周期。

`swap`
为字体提供一个非常小的阻塞周期和无限的交换周期。

`fallback`
为字体提供一个非常小的阻塞周期(<100ms)和短暂的交换周期(3s)

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

font-display各取值含义

阻塞时间里，显示空白的。交换周期主要是下载好的字体替换备用字体。

假设本地不存在该字体

• auto: 许多浏览器默认采取类似block的策略
• block:字体加载成功前，显示空白。注意到，这里在阻塞时间到达之后，会绘制invisible placeholder，所以直到字体加载完之前，都显示空白。被称为"flash of invisible text" or FOIT
• swap:先给极短时间加载字体(<100ms)，在这段时间里，如果字体加载成功，则渲染字体，否则，保持空白。一旦超出这极短的阻塞时间，则使用备用字体渲染。这之后，继续等待字体加载，一旦字体加载成功，则替换备用字体。被称为"flash of unstyled text" or FOUT for short
• fallback:先给极短时间加载字体(<100ms)，在这段时间里，如果字体加载成功，则渲染字体，否则，保持空白。一旦超出这极短的阻塞时间，则使用备用字体渲染。这之后，继续等待字体加载，一旦字体加载成功，则替换备用字体。但如果等待太久(超出3s)，则一直使用后备字体
• optional:极短空白，在这个空白时间里，交给浏览器决定是否下载字体

待定

对于swap模式，阻塞时间到底是0还是一个极小值
这一点MDN和其他文章有所差异，MDN认为是一个极小值，其他则认为是0

若swap阻塞时间是0，则swap过程是：先直接用后备字体渲染，等到字体加载成功，再替换备用字体。

兼容性

https://caniuse.com/#feat=css...

---

参考
font-dispaly [MDN]

中文网页字体设置方案：从 font-family 到 font-display

使用 font-display 提升使用自定义字体（font-face）时的性能与用户体验

font-display 【css-trick】
CSS小技巧：真不喜欢无样式字体闪现(FOUT)，那就用 font-display: optional 吧，也许会感到轻松