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 页面速度击中了。

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>

缺点是由于字体加载的延迟，我得到了一个字体"blink"。真的需要这样还是有第三种解决方案？

Answer 1

似乎没有真正防止第一次加载时闪烁的好方法，因为在页面已经打开之前字体不会到达那里。

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

上面有一篇很好的文章here。祝你好运！

Google 字体 + Pagespeed 让它闪烁

Google fonts + Pagespeed makes it blink

javascript

seo

fonts

google-font-api