避免字体的延迟加载

是否有避免字体延迟加载的实际方法？避免字体的延迟加载

有一个从Paul Irish about this FOUT（未版式文字的闪光）的博客。它从2009年起。

过去3年有没有进展？

来源

2012-07-20 Denny Mueller

当您参考您遇到的信息时，实际链接到它通常是一个好主意。 – 2012-07-20 13:34:08

这是一篇关于此主题的新帖子，我发现它很有帮助：https://michael.stapelberg.de/Artikel/font-loading – 2017-08-29 08:33:29

您提出了两个单独的问题。

延迟下载实际的字体文件本质上是不可避免的，尽管你可以通过不包括任何你实际不需要的东西来帮助它，从而最大限度地减小文件大小。根据您使用的服务/方法，这可能需要减少包含的字符集（/语言），以及重量和样式。

至于无风格文本的闪光，这是半不可避免的，部分原因是上面的下载时间问题。但是一旦你尽可能地减少了这些，你应该实现一个字体加载器来更好地控制这部分。这里的TypeKit's (open-sourced) implementation和brief explanatory blog post。底部的示例具体说明了FOUT;你几乎可以把它放到你自己的代码中。
以下是一些information from FontDeck关于使用Google的加载程序与他们的服务，这也将导致使用Google的WebFonts服务。

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

来源

2012-07-20 13:43:42

TypeKit的实现漂亮的'try {Typekit.load（）;} catch（e）{}'很多说这一切 - 文档不会渲染，直到脚本运行，所以，如果你不介意让你的用户等待额外的时间量（希望以毫秒为单位），那么这工作...如果你关心让你的页面尽可能快，这是行不通的。（...如果用户不够长时间看到您的网站*完成*加载，它并不重要，你的网站看起来像什么:) – danlefree 2012-07-20 13:57:46

这是值得一提的data-uri嵌入字体作为一个选项。避免额外的http请求。 – jason 2012-07-29 18:05:05

A）通过设置缓存控制和Content-Type正确地高速缓存中的字体：

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

B）避免为Vary头部HTTPS。只设置Accet-Encoding。的不同而不同：HTTPS breaks IE font loading.

Vary:Accept-Encoding

https://github.com/typekit/webfontloader

C）A和B应当在第一次请求之后很好地工作，当浏览器已经加载的字体。如果这还不够，请尝试Web Font Loader。

来源

2017-09-02 07:31:51

避免字体的延迟加载

回答

相关问题