新主题搭建完成了,可能时间上可以充裕一些,在整理模板优化性能的时候,看到谷歌 PageSpeed Insights 的诊断结果经常会有一项目:确保文本在网页字体加载期间保持可见状态,解释就是说利用 font-display 这项 CSS 功能,确保文本在网页字体加载期间始终对用户可见。在介绍 font-display 之前,先了解一下什么是 Web Fonts。
以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体,而由于每个用户电脑上的字体可能都不一样,所以能用的基本上就是操作系统内置的一些字体,例如微软雅黑,宋体,苹果苹方,这些也叫做安全字体(Web Safe Fonts)。为了使字体显示正常,我们一般会通过 font-family 属性同时指定多个字体,如果第一个字体没有在操作系统中找到,就会使用下一个后备字体( Fallback Font ),以此类推。
再后来CSS 开始支持 @font-face 这个指令,可以加载自定义的字体文件,这个时候可以把字体随网站一起发布,用户在浏览网站的时候,会下载 @font-face 中指定的字体。
确切的说“font-display”不属于 CSS 属性,而是专用于 @font-face 指令的描述符,它可以取如下几个值:
那么在了解 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分去停用或者以牺牲用户中心真正体验来换取啊,好了,有问题留言反馈吧。