确保在网页字体加载期间都保持可见状态

类别：FRONTEND / 前端 / 日期：2020-04-02 / 浏览：6749 / 评论：1

    针对Google PageSpeed（谷歌页面加速）服务中出现的在网页字体加载期间都保持可见状态进行解决。

    谷歌这边给出了两个解决方案，一个是针对特定文字加载JS进行处理，这个优点在于能够兼容各大平台的浏览器。如下：

<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

    另外一直则是，直接在CSS样式表中添加font-display: swap;，这个优点在于比较简单，但是兼容性相对较差，如下：

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://#.woff2) format('woff2');
  font-display: swap;
}

    因为第一种需要加载JS来配合CSS重新定义，变相的需要去考虑兼容性问题，所以我选择了第二种方案。

    如果不是真的必要的话，还是推荐第二种方案。简单实在，常用浏览器都支持这种写法。

赞助