15

有没有什么实际的方法可以避免字体的延迟加载？

Paul Irish有一篇关于这个 FOUT （无样式文本的闪光）的博文。它从 2009 年开始。

过去 3 年有什么进展吗？

4

2 回答 2

9

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

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

至于无样式文本的闪烁，这是半不可避免的，部分原因是上面的下载时间问题。但是一旦你尽可能地减少它，你应该实现一个字体加载器来更好地控制这部分。这是TypeKit 的（开源）实现和简短的解释性博客文章。底部的示例专门针对 FOUT；您几乎可以将其放入您自己的代码中。
这是FontDeck提供的一些关于在其服务中使用 Google 加载器的信息，这也将导致在 Google 的 WebFonts 服务中使用相同的加载器。

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

于 2012-07-20T13:43:42.807 回答
0

A) 通过正确设置 Cache-Control 和 Content-Type 来缓存字体：

Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)

B) 避免使用 https 作为 Vary 标头。只设置Accet-Encoding。Vary:https中断 IE 字体加载。

Vary:Accept-Encoding

https://github.com/typekit/webfontloader

C) A 和 B 在第一次请求后应该可以正常工作，此时浏览器已经加载了字体。如果这还不够，请尝试Web Font Loader。

于 2017-09-02T07:31:51.937 回答