在上一节中，我们一起探讨了 Web Fonts 和 系统字体之间的差异。在这一部分我们一起来探讨使用 Web Fonts 时，浏览器加载 Web Fonts 和渲染 Web Fonts 的策略。其实，聊 Web Fonts 就离不开 FOUT 、FOIT 和 FOFT 话题，特别是 FOUT 和 FOIT 。简单地说，FOUT、FOIT 和 FOFT 都是浏览器渲染文本的三种不同的表现，特别是 Web Fonts 被引入到 Web 中时，浏览器对 FOUT 和 FOIT 的优化就没有停止过。

FOUT, FOIT 和 FOFT

聊 Web Fonts 就离不开 FOUT 、FOIT 和 FOFT 话题，特别是 FOUT 和 FOIT 。简单地说，FOUT、FOIT 和 FOFT 都是浏览器渲染文本的三种不同的表现，特别是 Web Fonts 被引入到 Web 中时，浏览器对 FOUT 和 FOIT 的优化就没有停止过。

上面视频介绍了 FOUT 和 FOIT 的历史，来自于 《A historical look at FOUT and FOIT》一文

我们不去聊他们的历史以及整个演变过程，但我们要聊 Web Fonts 的优化，就需要对它们有一定的了解，因为我们后面有很多要做的事情都将围绕着 FOUT 和 FOIT 展开。先从字面意思开始：

• FOUT 是 Flash Of Unstyled Text 首字母缩写，中文意思是 无样式文本闪现
• FOIT 是 Flash Of Invisibale Text 首字母缩写，中文意思是 不可见文本闪现
• FOFT 是 Flash Of Faux Text 首字母缩写，中文意思是 伪文本闪现

Web Fonts 渲染表现

在 Web 中使用 Web Fonts时常会看到下图这样的两种现象： ​

简单地说，FOIT（不可见文本闪烁）和 FOUT（无样式文本闪烁）其实就是描述了浏览器处理页面加载 和 字体加载 之间时间的两种主要方式。事实上，Web Font 的文件大小相对较大（特别是中文字体），而页面的其他部分很可能在字体下载完毕之前就已经下载完毕。因此，我们需要决定在等待字体时如何处理页面上的文字。我们基本上有两种选择：

• 可以隐藏文本，直到字体准备好止（FOIT）
• 可以先使用备用字体显示，然后字体加载完成将其与 Web Font交换（FOUT）

使用 Web Font 造成文本闪现的原因

使用 Web Font 造成文本闪现（FOIT 和 FOUT） 除了内在的原因之外（字体的差异），还有外在的原因（字体的加载和渲染）。先来看外在的原因，即 字体加载和渲染。

通常，使用 CSS 的 @font-face 把 Web Fonts 嵌入到 Web 中。这些写在 CSS 文件中的样式规则，浏览器必须待文件下载结束并解析之后才能开始下载字体文件。而要真正地触发字体下载，还需要满足一些必备条件：

• 合法的 @font-face 规则，src 给当前浏览器引入可支持的字体格式（现在主流浏览器一般使用.woff 和 .woff2 两种字体格式）
• 文档中有节点使用了 @font-face 中相同的 font-fam