html - 避免延迟加载字体

Question

有什么实际的方法可以避免 font-face 的延迟加载吗？

有一篇博文来自 Paul Irish about this FOUT (无样式文本的闪光)。这是 2009 年的事。

过去 3 年有什么进展吗？

Answer 1

您提出了两个不同的问题。

下载实际字体文件的延迟基本上是不可避免的，但您可以通过不包含您实际上不需要的任何内容来帮助它，以最大限度地减少整体文件大小。根据您使用的服务/方法，这可能需要减少您包含的字符集(/语言)以及权重和样式。

至于无样式文本的闪现，这几乎是不可避免的，部分原因是上述下载时间问题。但是一旦你尽可能地减少它，你应该实现一个字体加载器来更好地控制这部分。这是 TypeKit's (open-sourced) implementation , 和一个 brief explanatory blog post .底部的示例专门针对 FOUT；您几乎可以将其放入您自己的代码中。
这是一些 information from FontDeck在他们的服务中使用谷歌的加载器，这也将导致对谷歌的 WebFonts 服务使用相同的加载器。

任何其他服务，您都必须开始进行自己的研究，但这些是一般概念。使用这些工具，您可以使用一些脚本和 CSS 规则来隐藏受影响的文本，直到字体准备好显示，以及其他一些用途。这不完全是个主意，但至少可以防止 FOUT。一旦超过该初始时间，浏览器的缓存就会接管并使其基本上没有实际意义。