Question

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

谢谢。

Answer 1

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

<html class="wf-loading">

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

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

Answer 2

@Astrotim，除了

之外，你的答案是有效的

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

2）在webfont加载完成之前，你最终会在3秒超时时删除wf-load。

我用modernizr来解决同样的问题（*）。只需硬编码no-js和wf加载到html元素中。然后你可以使用.no-js.wf-loading作为一个没有javascript的回退，而.js.wf-加载，而webfont加载器获取字体和.js.wf-active，.js.wf-inactive，当它完成时

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

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

2 个答案: