当网络字体加载缓慢时，如何恢复到未经过样式设计的文本？

Question

我正在使用谷歌网络字体，像这样：

@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: normal;
  src: local('Vollkorn Regular'), local('Vollkorn-Regular'), url('http://themes.googleusercontent.com/static/fonts/vollkorn/v2/BCFBp4rt5gxxFrX6F12DKnYhjbSpvc47ee6xR_80Hnw.woff') format('woff');
}
body {
    font-family: "Vollkorn", Georgia, Times, serif;
}

在Chrome中工作时，没有出现“未经样式化的文本闪烁”（如Typekit博客所述）。相反，在网络字体下载完成之前，文本根本不会加载。

在快速连接下，这非常好，因为字体异步加载并且非常快。然而，在较慢的连接下，页面看起来像是几秒钟为空白，直到网络字体加载完成 - 这样的可用性很差。

有没有聪明的方式可以最初显示Georgia字体的文本，然后在资源加载完成后添加Vollkorn字体？

我想我实际上更喜欢“未经样式化的文本闪烁”，而不是空白页面，并且希望强制执行此行为。

- Richard

Answer 1

你应该了解一下与几个网络字体服务共同开发的Web Font Loader，这是由Google公司推出的。 http://code.google.com/apis/webfonts/docs/webfont_loader.html

- Brad Dunzer

Answer 2

页面加载后可通过JavaScript完成此操作：

<script>
window.onload = changeFont;

function changeFont() {
   document.getElementsByTagName('body')[0].fontFamily = '"Vollkorn", Georgia, Times, serif';
}
</script>

然后，更新您的CSS以从列表中删除“Vollkorn”并将其设置为Georgia。 根据字体加载所需的时间，您可能需要在一个setTimeout调用中包装字体更改。

- endyourif

---

是的，我考虑过setTimeout，但我真正需要的是“网络字体已加载”事件。有没有办法使用JS来捕获它？ - Richard