避免延迟加载的字体 [英] Avoid delayed load of font-face

问题描述

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

Is there any actual way to avoid the delayed load of font-face?

有一个来自保罗·爱尔兰关于这个FOUT （闪光的未修饰的文本）。

There is a blogpost from Paul Irish about this FOUT (flash of unstyled text). Its from 2009.

过去3年有什么进展吗？

Is there any progress in the last 3 Years?

推荐答案

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

You're bringing up two separate issues.

下载实际字体文件的延迟本质上是不可避免的，虽然你可以通过不包括你实际不需要的东西来帮助它，以便最小化文件大小总体。根据您使用的服务/方法，这可能会减少您添加的字符集（/语言），以及权重和样式。

A delay in downloading the actual font files is essentially unavoidable, though you can help it by not including anything you don't actually need, so as to minimize the file size overall. Depending upon what service/method you're using, this might entail reducing what character sets(/languages) you include, as well as weights and styles.

闪光的未定型文本，这是半不可避免的，部分是由于上面的下载时间问题。但是一旦你减少了尽可能多的，你应该实现一个字体加载器，以更好地控制这部分。以下是 TypeKit（开源）实施，以及简要说明文章。下面的例子具体说明了FOUT;你几乎可以把它放进你自己的代码。

这里有一些来自FontDeck的信息使用Google的加载器及其服务，这也将导致使用相同的Google的WebFonts服务。

As to the flash of unstyled text, that's semi-unavoidable, partially due to the downloading time issue above. But once you've reduced that as much as you can, you should implement a font loader to take better control of this part. Here's TypeKit's (open-sourced) implementation, and a brief explanatory blog post. The example at bottom specifically addresses FOUT; you can pretty much just drop it into your own code.
Here's some information from FontDeck on using Google's loader with their service, which will also lead to using same for Google's WebFonts service.

任何其他服务，你必须开始做自己的研究，但这些是一般概念。使用这些工具，您可以使用一些脚本和CSS规则来隐藏受影响的文本，直到字体准备好呈现，以及其他一些用途。这不是完全的想法，但至少防止FOUT。一旦超过初始时间，浏览器的缓存应该接管，并使其大部分无效。

Any other service, you'll have to start doing your own research, but those are the general concepts. With those tools, you can use a bit of scripting and CSS rules to hide the affected text until the fonts are ready for presentation, among some other uses. It's not completely idea, but at least prevents the FOUT. Once past that initial time, the browser's cache should take over and make it largely moot.

这篇关于避免延迟加载的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！