html - 当网络字体加载缓慢时恢复为无样式文本？

Question

我正在使用 Google 网络字体，如下所示:

@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 blog post 中所述)。相反，在网络字体下载完成之前根本不会加载文本。

通过快速连接，这很棒，因为字体加载速度非常快。然而，在较慢的连接上，页面看起来有几秒钟是空的，直到加载网络字体——这是很差的可用性。

有没有一种巧妙的方法可以在最初以格鲁吉亚显示文本，然后在资源加载后添加 Vollkorn 字体？

我想我的意思是我实际上更喜欢“无样式文本的闪光”，而不是空白页面，并且想要强制执行此行为。

Answer 1

您应该查看 Google 与其他一些网络字体服务共同开发的网络字体加载器。

http://code.google.com/apis/webfonts/docs/webfont_loader.html