如何检测无法从谷歌网络字体加载字体

Question

我正在加载谷歌网络字体以显示一些文本字符串。

我想要做的是，如果在任何情况下如果谷歌网络字体无法加载（可能是超时或网络问题等），我想显示图像而不是落入字体族堆栈。

有没有办法检测Google网络字体是否已成功加载;这样我就可以实现像

这样的东西

if (Google webfont loads successfully) {
    //display the string using that font
} else {
    //display an image instead
}

Answer 1

webfont加载请求将在页面的HTML节点上生成类属性。使用Google Webfont Loader（我假设Google类型服务使用，以及Typekit），以下类将指示状态：

1. wf-inactive（你正在寻找的那个）
2. WF-装载
3. WF-活性

此外，您还将拥有特定于字体的类，例如wf-myfont-active。