我们稍微休息一下搜索工作，解决一个小问题。
“FOUT” 代表 “未设置样式文本闪烁”。这是 @font-face 字体加载需要一点时间，因此您会在自定义字体加载之前看到回退字体。这通常在 Typekit 中 *不是* 问题。在现代浏览器中（除了 IE 9）也不是真正的问题。但是，*这对我们来说* 是一个问题，因为我们专门选择异步加载 Typekit JavaScript。
不过希望还没有破灭，Typekit 已经解决了这个问题，我们只需要对我们的网站做一点工作。我们在 <html> 元素上添加了一个新的类名“wf-loading”（网页字体加载）。然后在我们的 CSS 中，我们声明任何使用自定义字体的选择器在该类名消失之前都不可见。你可能会认为这有点冒险，但如果字体加载失败，则会存在一个超时，无论如何都会删除该类。请记住，这仅仅是为了解决 FOUT，只是一个小小的视觉上的改进。
我们通过创建一个名为“preventFOUT”的小 Sass @mixin 并在我们的自定义字体堆栈（也是 @mixin）中 @include 它来完成所有这些操作。
这现在对我们来说效果很好。最终在这个设计中，我们转向 HF&J 字体，这些字体通过 @font-face 直接加载，因此我们基本上停止担心这个问题。
嗨，Chris！指向 paulirish.com 的链接不起作用，因为它末尾有一个单引号。
谢谢！已修复。
我完全以为你会将
wf-loading & { visibility: hidden; }添加到所有具有网络字体的字体系列 mixin 中。这样，无论您在何处使用网络字体，它都会自动执行解决 FOUT 的操作。在 Typekit 的 博客 上，也建议使用 .wf-inactive 类来设置 Typekit 加载失败时的回退字体系列堆栈。