css - 控制@font-face 浏览器下载

Question

在 css 中使用 @font-face 时，浏览器会在字体之前加载我的页面文本，这会导致字体从一种样式跳到另一种样式（从 Arial 到 myfont）。例如，当使用压缩字体时，这个问题在视觉上非常明显。

我只想显示我用@font-face 选择的一种字体。做这个的最好方式是什么？

score 2 · Accepted Answer

它被称为 FOUT 以我的经验处理它的最佳方法是使用 Google 的字体加载器：

本质上，您所做的是让页面正常加载（在此期间隐藏正文或隐藏样式字体块，您的选择），一旦加载它们，就会将一个类添加到页面正文中，这会触发样式的显示字体。

该脚本添加了这些类，以便您可以适当地设置样式：

 .wf-inactive - failed to load
 .wf-loading - during load
 .wf-active - loaded fine

唯一的缺点是它需要Javascript ..

score 0 · Accepted Answer

这被称为Flash Of Unstyled Text并且正如您所提到的，由于字体文件与页面的其余部分一起加载，其文本将使用默认或后备字体设置样式，直到新字体被加载并且可以被应用。

看来，尽量减少这种影响的发生的最好方法是尽量减少客户端加载自定义字体所花费的时间。您可以采取两种措施来实现这一点，即通过 gZip压缩字体文件，并指定您的字体文件以供查看者的浏览器长期缓存，以便通过far-future expires header进行后续视图。

如果 FOUT 对您的用户来说仍然很刺耳，您可以指定一个类似形状的字体，它可能会安装在大多数查看者的机器上作为备用，以在加载自定义字体时保持您的页面大小相对一致。例如，对于您的精简字体，大多数查看器已经将 Impact 作为可用字体或 Arial Narrow，两者都遵循“精简”样式。

如果所有其他方法都失败了，您始终可以使用 JavaScript 设置整个文档的样式，color: rgba(0,0,0,0)并在计时器结束时删除该规则。

score 0 · Accepted Answer

这在某些浏览器（Firefox 3.5/3.6、IE 7-9）中是一个众所周知的问题。WebINK有一个可用的 JavaScript 文件，可让您解决该问题。

3 回答 3