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

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-loading
3. wf-active

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