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

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。