性能文章>使用 CSS font-display 优化字体加载和替换>

使用 CSS font-display 优化字体加载和替换转载

161711

导语

 
在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通过改变 CSS 中的 font-display 属性,就可以避免这个问题。
 
 

正文

什么是 Web Fonts

 
在介绍 font-display 之前,先了解一下什么是 Web Fonts。在以前使用 CSS 指定字体时只能使用用户电脑本地上现有的字体,而由于每个用户电脑上的字体可能都不一样,所以能用的基本上就是操作系统内置的一些字体,例如微软雅黑,宋体,苹果苹方,这些也叫做安全字体(Web Safe Fonts)。为了使字体显示正常,我们一般会通过 font-family 属性同时指定多个字体,如果第一个字体没有在操作系统中找到,就会使用下一个后备字体( Fallback Font ),以此类推:
 
* {
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}
后来,CSS 开始支持 @font-face 这个指令,可以加载自定义的字体文件,这个时候可以把字体随网站一起发布,用户在浏览网站的时候,会下载 @font-face 中指定的字体。例如下边的代码加载了 fonts 目录下的 Raleway 字体:
 
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/raleway.woff2) format('woff2');
}
src 属性用于指定字体的位置,其中 url() 函数也接受网络地址,来加载第三方提供的字体文件,这样也催生了像 Google Fonts 这样的云字体服务。不过,基本上只有英文字体才适合 Web Fonts,因为它只有 26 个英文字母外加数字,体积小,适合在网络上传输,而中文光常用的就有 3000 个字符,所以一般只使用操作系统自带的,不过现在也有字体服务会根据网站上所使用的文字去动态的生成字体文件。
 

浏览器加载 Web Fonts 的时期

 
 
浏览器加载 Web Fonts 时按顺序会有三个时期:
 
  • 阻塞期(Block Period)。在此期间如果字体没有加载完成,那么浏览器会使用 font-family 指定的字体列表中的后备字体(Fallback)进行渲染,但是显示为空白,也就是对于用户是不可见的。在此期间字体加载完成之后才能正常显示该字体。
  • 交换期(Swap Period)。跟阻塞期类似,但是在这个时期内,它会在字体加载时,先用后备字体渲染文本并显示出来(而不是显示空白),在此期间字体加载完成之后才能正常的显示该字体。
  • 失败期(Failure Period)。如果字体加载失败,则使用后备字体显示文本。
至于每个时期有多长,是根据 font-display 属性的值来确定的。
 
 

font-display 介绍

 
 
font-display 确切的说不是 CSS 属性,而是专用于 @font-face 指令的描述符,它可以取如下几个值:
 
  • auto 。这个是 font-display 的默认值,字体的加载过程由浏览器自行决定,不过基本上和取值为 block 时的处理方式一致。
  • block 。在字体加载前,会使用备用字体渲染,但是显示为空白,使得它一直处于阻塞期,当字体加载完成之后,进入交换期,用下载下来的字体进行文本渲染。不过有些浏览器并不会无限的处于阻塞期,会有超时限制,一般在 3 秒后,如果阻塞期仍然没有加载完字体,那么直接就进入交换期,显示后备字体(而非空白),等字体下载完成之后直接替换。
  • swap 。基本上没有阻塞期,直接进入交换期,使用后备字体渲染文本,等用到的字体加载完成之后替换掉后备字体。
  • fallback 。阻塞期很短(大约100毫秒),也就是说会有大约 100 毫秒的显示空白的后备字体,然后交换期也有时限(大约 3 秒),在这段时间内如果字体加载成功了就会替换成该字体,如果没有加载成功那么后续会一直使用后备字体渲染文本。
  • optional 。与 fallback 的阻塞期一致,但是没有交换期,如果在阻塞期的 100 毫秒内字体加载完成,那么会使用该字体,否则直接使用后备字体。这个就是说指定的网络字体是可有可无的,如果加载很快那么可以显示,加载稍微慢一点就不会显示了,适合网络情况不好的时候,例如移动网络。
那么在了解 font-display 之后,那么我们应该不难看出来,对于大部分情况应该把它的值设置为 swap ,这样在加载网络字体期间,使用后备字体进行渲染,加载完成之后在替换为指定的网络字体。
 
 

应用

 
现在使用谷歌的 Web Fonts 字体服务已经不需要我们用手动去写 @font-face 指令了,而是通过调用它的接口,直接返回一段 @font-face 指令 CSS 代码,同时它也支持 display=swap 参数,来让返回的 CSS 代码中,设置 font-display 为 swap ,这个可以从我的网站上看到:
 
/* https://fonts.font.im/css?family=Raleway:500,700&display=swap */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.font.im/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ... */
 
 

浏览器支持

 
从 caniuse.com[1] 网站上可以查到,这个属性在各个浏览器中的支持程度为(最低版本):
 
使用 CSS font-display 优化字体加载和替换数据图表-heapdump性能社区
 
更多思考
 
web的性能优化总的来说是相对简单的知识点,更多关于web性能调优的知识点大家可以通过以下文章加深学习:

用Webpack这15个点,速度提升70%,体积减小80%!

我的第一次webpack优化,首屏渲染从9s到1s

 

分类:标签:
请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
使用 Lighthouse 优化 Web Vitals
今天,我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能,以帮助确定您的网站如何在Web Vitals上进行改进。 作为工具的复习,Lighthouse是一个开源的自动化工具,用于提高网页的质量。您可以在Chrome DevTools调试工具套件
使用 CSS font-display 优化字体加载和替换
导语 在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成
从实际项目入手,完成web性能监控及优化
导语 这篇文章总结一下我过往项目的web性能优化,主要是就项目中如何发现性能问题,优化如何解决,谈一下性能优化。把学习的过程跟大家分享一下,共同学习。web的性能监测工具我用的是Chrome的Performance 面板和Lighthouse。 正文 回想起
4000字全解Web 前端性能
导语也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是,如何进行 web 性能监控本身是一个很大的话题,文中只会侧
关于Web页面全链路性能优化指南
导语性能优化不单指优化一个页面的打开速度,在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化,大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中,能够让任何一个链路快一点,都可以被叫做性能优化。本文会对web页面的全链路进行完整的讲解并针对每一步找到
关于web端字体设置及兼容性适配的问题
前言在几年的开发生涯中碰见过几次由字体引起的各终端的页面显示差异。或许是由移动端等终端字体库引起的差异引起的,或许是由 Modern Browser 或 IE Browser 直接的解析差异引起的,或许是由字体源设计表现引起的,或许是由所设置的通用字体族字符的编码格式引起的......来一起来探个
如何利用Fastify 实现更快的 JSON 序列化
导语对于 web 框架而言,更快的 HTTP 请求响应速度意味着更优异的性能。而 HTTP 协议是一个文本协议,传输的格式都是字符串,而我们在代码中常常操作的是 JSON 格式的数据。因此,需要在返回响应数据前将 JSON 数据序列化为字符串。JavaScript 原生提供了 JSON.strin