Question

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

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

然后我受到Google Page speed的影响。

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。祝你好运！

谷歌字体+ Pagespeed让它眨眼

1 个答案: