通过font-display控制字体加载行为以提升首屏性能

当字体也开始“耍大牌”： font-display 拯救你的首屏加载速度

咱们程序员这个行当，追求的就是一个“快”字。代码要跑得快，bug要改得快，就连用户体验，也得快！尤其是在用户第一次打开网页的时候，那几秒钟的体验至关重要，直接决定了用户是留下，还是默默点击右上角的“X”。

在这个“快”字当头的时代，字体，这个我们经常忽略的小家伙，却可能成为拖慢速度的罪魁祸首。想想看，精心挑选的字体，没加载出来之前，网页要么一片空白，要么字体丑到让人想吐。这可咋整？

别慌，今天我们就来聊聊 font-display 这个神奇的 CSS 属性，它就像一个“字体行为规范管理器”，能帮你巧妙地控制字体加载的行为，让你的首屏加载速度蹭蹭蹭地往上涨！

字体加载的“傲娇”三部曲

在深入 font-display 之前，我们得先了解一下字体加载过程中，浏览器都经历了哪些内心戏。简单来说，可以概括为“傲娇”三部曲：

1. 阻塞期 (Block Period)： 这是字体最“耍大牌”的阶段。如果字体没有加载完成，浏览器会“宁为玉碎，不为瓦全”，直接显示空白。这就意味着，用户只能看到一片白茫茫大地真干净，啥也看不到。是不是很刺激？

2. 交换期 (Swap Period)： 经过一段时间的“阻塞”，字体也开始稍微妥协了。如果字体还是没加载完，浏览器会先用一个备用字体顶替上，至少让用户能看到内容，虽然可能和我们理想中的效果差之千里。

3. 成功期 (Success Period)： 终于，字体加载完成了！浏览器欢天喜地地把备用字体换成我们精心挑选的字体，整个页面焕然一新。

这三个阶段，就像一个傲娇的女神（字体）和苦苦追求的备胎（备用字体）以及最终抱得美人归的程序员之间的爱恨情仇。

font-display：字体行为规范管理器，让爱来得更快一些

font-display 就是我们用来调教这位“傲娇女神”的工具。它有五个不同的取值，每个取值都对应着不同的字体加载策略，咱们一个一个来分析：

• auto： 这是一个“随缘”的取值。浏览器会自己决定怎么加载字体，通常会遵循它自己默认的策略。如果你不确定用哪个，或者懒得管，那就用它吧。但是，别指望它能给你带来什么惊喜。

• block： 这是最“保守”的策略。浏览器会死等字体加载完成，如果等的时间太长，就显示空白。这个策略适合那些对字体要求非常高，并且对首屏加载速度不太敏感的场景。比如，一些注重品牌形象的网站，宁可让用户多等一会儿，也要保证字体的完美呈现。

  • 举个“栗子”： 想象一下，你是一个奢侈品品牌的网站开发者，你的老板对字体的要求极其苛刻，必须完美展现品牌的高端大气上档次。在这种情况下，font-display: block; 可能是个不错的选择，毕竟，等待也是一种仪式感嘛！

• swap： 这是最“激进”的策略。浏览器会尽快显示备用字体，等到字体加载完成后再替换。这个策略适合那些对首屏加载速度要求非常高的场景，比如新闻网站、博客等等。毕竟，用户是来看内容的，不是来看空白页面的。

  • 举个“栗子”： 假设你是一个新闻网站的开发者，分秒必争，因为新闻有时效性。你肯定不希望用户打开页面，只看到一片空白，然后默默关掉。使用 font-display: swap; 可以确保用户第一时间看到新闻内容，即使字体还没加载出来。

• fallback： 这是一个“折中”的策略。它结合了 block 和 swap 的特点。在很短的时间内，浏览器会像 block 一样等待字体加载，如果超过这个时间，就显示备用字体，然后像 swap 一样等待字体加载完成后替换。

  • 举个“栗子”： 你是一个电商网站的开发者，你希望在用户打开页面时，尽可能快地展示商品信息，但是也希望字体能够尽快加载出来，提升用户体验。使用 font-display: fallback; 可以让你在速度和体验之间找到一个平衡点。

• optional： 这是一个“佛系”的策略。浏览器会根据自己的判断，决定是否下载字体。如果用户网络环境不好，或者浏览器认为下载字体会影响性能，它可能会直接放弃下载，只显示备用字体。

  • 举个“栗子”： 想象一下，你是一个面向全球用户的网站开发者，你的用户可能来自世界各地，网络环境千差万别。使用 font-display: optional; 可以让浏览器根据用户的网络环境，智能地选择是否下载字体，保证用户能够获得最佳的体验。

实战演练：如何优雅地使用 font-display

说了这么多，咱们来点实际的。看看如何在 CSS 中使用 font-display：

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 这里就是关键！ */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* 别忘了指定备用字体 */
}

这段代码的意思是：

1. 我们定义了一个名为 MyCustomFont 的自定义字体。
2. 指定了字体的来源 (woff2 和 woff 格式)。
3. 最关键的是，我们设置了 font-display: swap;，告诉浏览器尽快显示备用字体，等到 MyCustomFont 加载完成后再替换。
4. 在 body 样式中，我们使用了 MyCustomFont 作为主要字体，并指定了 sans-serif 作为备用字体。

选择备用字体：丑小鸭变白天鹅的关键

选择一个合适的备用字体，对于用户体验至关重要。如果备用字体和目标字体差距太大，可能会让用户觉得页面“跳动”，影响视觉体验。

一般来说，选择备用字体时，可以考虑以下几个因素：

• 字重 (font-weight)： 尽量选择字重和目标字体相近的备用字体。
• 字形 (font-style)： 尽量选择字形和目标字体相近的备用字体。
• 衬线 (serif) vs. 无衬线 (sans-serif)： 如果目标字体是衬线字体，备用字体也尽量选择衬线字体；如果目标字体是无衬线字体，备用字体也尽量选择无衬线字体。
• 字体的整体风格： 尽量选择和目标字体风格相近的备用字体。

font-display 的兼容性：不用担心，大胆用！

font-display 的兼容性非常好，几乎所有的现代浏览器都支持它。所以，你可以放心地使用它来优化你的网站。

总结：font-display，让你的网站跑得更快，更优雅！

font-display 是一个非常实用的 CSS 属性，可以帮助我们更好地控制字体加载的行为，提升首屏加载速度，改善用户体验。选择合适的 font-display 值，再搭配一个合适的备用字体，就能让你的网站跑得更快，更优雅！

所以，下次你在优化网站性能的时候，别忘了给字体也“安排”一下！让它们也为你的网站贡献一份力量！