谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换

新主题搭建完成了，可能时间上可以充裕一些，在整理模板优化性能的时候，看到谷歌 PageSpeed Insights 的诊断结果经常会有一项目：确保文本在网页字体加载期间保持可见状态，解释就是说利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。在介绍 font-display 之前，先了解一下什么是 Web Fonts。

Web Fonts

以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体，而由于每个用户电脑上的字体可能都不一样，所以能用的基本上就是操作系统内置的一些字体，例如微软雅黑，宋体，苹果苹方，这些也叫做安全字体（Web Safe Fonts）。为了使字体显示正常，我们一般会通过 font-family 属性同时指定多个字体，如果第一个字体没有在操作系统中找到，就会使用下一个后备字体（ Fallback Font ），以此类推。

再后来CSS 开始支持 @font-face 这个指令，可以加载自定义的字体文件，这个时候可以把字体随网站一起发布，用户在浏览网站的时候，会下载 @font-face 中指定的字体。

font-display 介绍

确切的说“font-display”不属于 CSS 属性，而是专用于 @font-face 指令的描述符，它可以取如下几个值：

• auto 。这个是 font-display 的默认值，字体的加载过程由浏览器自行决定，不过基本上和取值为 block 时的处理方式一致。

• block 。在字体加载前，会使用备用字体渲染，但是显示为空白，使得它一直处于阻塞期，当字体加载完成之后，进入交换期，用下载下来的字体进行文本渲染。不过有些浏览器并不会无限的处于阻塞期，会有超时限制，一般在 3 秒后，如果阻塞期仍然没有加载完字体，那么直接就进入交换期，显示后备字体（而非空白），等字体下载完成之后直接替换。

• swap 。基本上没有阻塞期，直接进入交换期，使用后备字体渲染文本，等用到的字体加载完成之后替换掉后备字体。

• fallback 。阻塞期很短（大约100毫秒），也就是说会有大约 100 毫秒的显示空白的后备字体，然后交换期也有时限（大约 3 秒），在这段时间内如果字体加载成功了就会替换成该字体，如果没有加载成功那么后续会一直使用后备字体渲染文本。

• optional 。与 fallback 的阻塞期一致，但是没有交换期，如果在阻塞期的 100 毫秒内字体加载完成，那么会使用该字体，否则直接使用后备字体。这个就是说指定的网络字体是可有可无的，如果加载很快那么可以显示，加载稍微慢一点就不会显示了，适合网络情况不好的时候，例如移动网络。

那么在了解 font-display 之后，那么我们应该不难看出来，对于大部分情况应该把它的值设置为 swap ，这样在加载网络字体期间，使用后备字体进行渲染，加载完成之后在替换为指定的网络字体。

优化代码：

优化前：

@font-face {
  font-family: "icon";
}

优化后：

@font-face {
  font-family: "icon";
  font-display: swap;
}

其中“font-family”后面根据实际情况设置，可以奥森或者阿里图标再或者一些特效等等。另外“font-display”是用于指定字体显示策略的 API，而“swap”告诉浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后，系统字体将被换出。如果浏览器不支持font-display，浏览器将继续遵循其加载字体的默认行为。

浏览器支持

从网站上可以查到，这个属性在各个浏览器中的支持程度为（最低版本）：

现在我们知道了关于谷歌PageSpeed Insights性能检测工具应该怎么优化了，当然有问题的还不这一点，后期遇到感兴趣的在记录吧，目前PC端优化完成已经达到90+，就差移动端优化了，加油吧，继续努力，做到无论PC还是移动端均是90+就满意了，对了，模板优化是完成了，不包含独立购买的插件可能还是会引起部分性能的扣分，这个是没办法的，具体情况具体在意，毕竟也不能为了90分去停用或者以牺牲用户中心真正体验来换取啊，好了，有问题留言反馈吧。