wf-加载类未出现在网站上

Question

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

如果你想看看，我们的网站是http://wiredimpact.com，谷歌WebFont加载器的文档在https://developers.google.com/webfonts/docs/webfont_loader。

谢谢。

Answer 1

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

<html class="wf-loading">

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

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

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

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