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

Posted 2023-03-15

【中文标题】当网络字体加载缓慢时恢复为无样式文本？

【英文标题】：Revert to unstyled text when web fonts are slow to load?

【发布时间】：2012-01-13 11:28:42

【问题描述】：

我正在使用 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 字体？

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

【参考方案1】：

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

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

【参考方案2】：

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

<script>
window.onload = changeFont;

function changeFont() 
   document.getElementsByTagName('body')[0].fontFamily = '"Vollkorn", Georgia, Times, serif';

</script>

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

【讨论】：

是的，我考虑过 setTimeout，但我真正需要的是一个“网络字体已加载”事件。有什么方法可以使用 JS 来解决这个问题？