wf-loading 类没有出现在网站上答案

【问题标题】：wf-loading class not appearing on websitewf-loading 类没有出现在网站上
【发布时间】：2014-01-28 16:18:18
【问题描述】：

我们目前正在使用 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。

谢谢。

【问题讨论】：

我遇到了同样的问题：.wf-loading 类没有附加到 html 类，所以我不能在 CSS 中定位它。真可惜。

标签： fonts

【解决方案1】：

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

<html class="wf-loading">

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

setTimeout(function() {
    $('html').removeClass('wf-loading');
}, 3000);

【讨论】：

【解决方案2】：

@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。

【讨论】：