12

我正在使用 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 博客文章中所述）。相反，在网络字体下载完成之前，文本根本不会加载。

通过快速连接，这很棒，因为字体异步加载并且非常快。但是，在连接速度较慢的情况下，页面在几秒钟内看起来像是空的，直到加载了 Web 字体——可用性很差。

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

我想我要说的是我实际上很喜欢“无样式文本的闪烁”，而不是空白页，并且想强制执行这种行为。

4

2 回答 2

3

您应该查看 Google 与其他一些 Web 字体服务共同开发的 Web Font Loader。

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

于 2011-12-06T04:14:25.550 回答
0

这可以在页面加载后通过 JavaScript 完成：

<script>
window.onload = changeFont;

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

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

于 2011-12-05T18:50:02.060 回答