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

李洋博客 2022-11-18 5.62 K阅读 0评论

温馨提示:这篇文章已超过551天没有更新,请注意相关的内容是否还可用!

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

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

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提示利用font-display控制网页字体可见性的加载和替换  第2张

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

文章版权声明:除非注明,否则均为老李笔记原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,5620人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码