javascript - Google 字体 + Pagespeed 使它闪烁

Question

我的第一个解决方案是像这样添加 Google 字体:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Abel|Arimo:400,700' rel='stylesheet' type='text/css'>

然后我被谷歌页面速度击中了。

Google Pagespeed说我应该异步加载字体。所以我做到了并且有效。现在，在加载整个页面之前不会加载字体。

<script type="text/javascript">
WebFontConfig = {
  google: {
    families: [ 'Open+Sans:300', 'Abel', 'Arimo:400,700' ]
  },
  active: function() {

  },
};

/* async! */
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

缺点是由于字体加载的延迟，我得到了一个字体“闪烁”。真的需要那样吗？还是有第三种解决方案？

Answer 1

似乎没有什么好方法可以防止第一次加载时闪烁，因为字体只有在页面已经打开后才会出现。

处理它的最好方法似乎是使用某种标志，通过 cookie 或在 sessionStorage 中，让浏览器知道在可能的情况下使用缓存副本。

上面有一篇很好的文章here .祝你好运!