Google fonts + 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上有一篇很好的文章。祝好运!