2

我们目前正在使用 Google 的 WebFont Loader 来加载我们自定义的 @font-face 字体。该工具应该通过允许我们在加载字体时使用 css 类来隐藏文本来消除 fout。不幸的是，似乎 html 标签上的类总是 wf-active 所以 fout 仍然显示。有谁知道为什么没有显示 wf-loading 类？

如果您想查看我们的网站http: //wiredimpact.com，Google WebFont Loader 的文档位于https://developers.google.com/webfonts/docs/webfont_loader。

谢谢你。

4

2 回答 2

3

我创建了一个 hack 来解决这个问题。wf-loading首先，我将类硬编码为html元素。

<html class="wf-loading">

WebFont 加载器删除这个类并在加载后用相关的字体类替换它，所以一切都按预期工作。但是，我不希望出现 WebFont 加载器不加载且wf-loading类未删除的情况，因此作为后备，我添加了一个脚本以在 3 秒后删除该类：

setTimeout(function() {
    $('html').removeClass('wf-loading');
}, 3000);
于 2013-05-22T03:02:25.343 回答
0

@Astrotim，您的答案将有效，除非在以下情况下

1）用户没有javascript。然后 wf-loading 类永远不会离开。

2) 在 webfont 加载器完成之前，您最终会在 3 秒超时后删除 wf-loading。

我使用modernizr 来解决同样的问题（*）。只需将 no-js 和 wf-loading 硬编码到 html 元素中。然后，您可以使用 .no-js.wf-loading 作为无 javascript 后备，并在 webfont 加载器获取字体时使用 .js.wf-loading，并在完成时使用 .js.wf-active,.js.wf-inactive .

(*) Modernizr 将在 html 元素中查找 no-js，如果启用了 javascript，则将其更改为 js。

于 2014-01-16T13:58:13.990 回答