最新使用 font-display 优化 web 字体加载速度，面试字节跳动被问前端屏幕适配方案

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

@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;

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】