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中所述）。相反，在Web字体下载完成之前，文本根本不会加载。

通过快速连接，它很棒，因为字体异步加载非常快。但是，通过缓慢的连接，页面看起来像是空的几秒钟，直到Web字体加载 - 这是可用性差。

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

我想我所说的是，我实际上非常喜欢“无格式文字的闪光”，而不是空白页面，并希望强制执行此行为。

Answer 1

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

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

Answer 2

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

<script>
window.onload = changeFont;

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

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

当Web字体加载缓慢时，还原为无格式文本？

2 个答案: