html – 当网络字体加载缓慢时,还原为未分页的文本？

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

我想我所说的是,我实际上非常喜欢“闪烁的无字的文本”,而不是一个空白的页面,并希望强制执行这种行为.

解决方法

您应该查看Google与其他几种Web字体服务共同开发的Web Font Loader.

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

原文地址：https://www.jb51.cc/html/229614.html