字体加载的那些“爱恨情仇”：优化 CSS font-display 策略
你有没有过这样的经历：打开一个网页，满心期待，结果映入眼帘的是一片空白，或者是一些丑陋的默认字体，等到过了一会儿，精心设计的字体才姗姗来迟，整个页面突然“Duang”的一下换了个模样？
这种体验，就像赴约迟到的女神，虽然最终还是来了，但总让人感觉有点扫兴。而罪魁祸首，往往就是字体加载的问题。
字体，是网页的门面，是排版设计的灵魂。一个好的字体，能让你的网站瞬间提升几个档次，让人赏心悦目，流连忘返。但字体文件往往比较大，加载需要时间。如果处理不好，就会严重影响用户体验，让你的网站变成一个“等待戈多”的剧场。
好在，CSS 提供了 font-display 属性，让我们有能力控制字体加载过程中的行为，缓解甚至避免上述问题的发生。它就像一个字体加载的“管家”，可以根据不同的场景，采取不同的策略，让你的网站在字体加载期间，依然保持优雅。
今天，我们就来聊聊 font-display 这个“管家”，看看它都有哪些招数，以及如何运用这些招数，优化你的字体加载策略。
font-display 的五种取值：性格迥异的“管家”
font-display 属性有五个可选值，分别是：auto、block、swap、fallback 和 optional。 它们就像五个性格迥异的“管家”，对待字体加载的态度也各不相同：
-
auto：随缘型“管家”auto是默认值，它会继承浏览器的默认行为。这意味着，浏览器会根据自身的情况，决定如何处理字体加载。 这种方式，就像把一切都交给命运，听天由命。如果你不确定该用哪个值，或者懒得去管，那就用
auto吧。反正浏览器会帮你处理，只是效果嘛，就不好说了。 -
block：严厉型“管家”block是一位非常严格的“管家”，它会坚决要求字体必须加载完成才能显示。在字体加载期间，它会先显示一段空白区域，直到字体加载完毕，才会显示文字。这种方式，虽然能保证最终呈现的字体是正确的，但用户体验却不佳。想象一下，打开一个网页，看到的是一片空白，这感觉是不是很糟糕？
所以，除非你对字体非常重要，非它不可，否则不建议使用
block。 -
swap：积极型“管家”swap是一位非常积极的“管家”，它会立即显示文字，即使字体还没有加载完成。在字体加载期间，它会先显示一个备用字体（通常是系统字体），等到字体加载完毕，再切换到目标字体。这种方式，能保证用户在第一时间看到内容，避免空白区域的出现。虽然备用字体可能不如目标字体美观，但至少能让用户知道网页在正常工作。
swap是一个比较常用的值，它能在保证用户体验的同时，尽可能地使用目标字体。 -
fallback：折中型“管家”fallback是一位非常折中的“管家”，它会在字体加载期间先显示一个备用字体，但会给字体一个短暂的“宽限期”。如果在宽限期内字体加载完毕，则切换到目标字体；如果超过宽限期，则一直使用备用字体。这种方式，兼顾了用户体验和字体效果。如果字体加载速度快，就能使用目标字体；如果字体加载速度慢，也能保证用户看到内容，不至于一直等待。
fallback是一个比较灵活的值，可以根据实际情况调整宽限期，达到最佳效果。 -
optional：佛系型“管家”optional是一位非常佛系的“管家”，它会根据网络情况和浏览器自身的判断，决定是否加载字体。如果网络状况良好，或者浏览器认为加载字体不会影响用户体验，则加载字体；否则，就一直使用备用字体。这种方式，最大限度地保证了用户体验，但可能会牺牲一些字体效果。
optional适用于对字体要求不高，或者对用户体验要求极高的场景。
如何选择合适的 font-display 值：因地制宜的策略
了解了 font-display 的五种取值，接下来，我们就要根据实际情况，选择合适的策略。
没有一种策略是万能的，最好的策略，是根据你的网站特点、用户群体和字体重要性，进行综合考虑，制定一个最适合你的方案。
下面是一些建议，供你参考：
-
如果你的字体非常重要，非它不可，而且网站用户群体网络状况良好：
可以使用
block。虽然会有一段空白期，但能保证最终呈现的字体是正确的。但是！请务必慎重考虑，因为空白期可能会严重影响用户体验。
-
如果你的字体比较重要，但用户体验也很重要：
可以使用
swap或fallback。swap保证用户第一时间看到内容，fallback则在两者之间取得平衡。具体选择哪个，可以根据字体加载速度和备用字体的美观程度来决定。如果字体加载速度快，或者备用字体比较美观，可以使用
swap；否则，可以使用fallback。另外，
fallback允许你设置一个宽限期，你可以根据实际情况进行调整。 -
如果你的字体不太重要，或者用户体验至上：
可以使用
optional。 这种方式，能最大限度地保证用户体验，但可能会牺牲一些字体效果。 -
如果你的网站主要面向移动端用户，而且网络状况不稳定：
建议使用
optional或fallback。 移动端用户对加载速度更加敏感，所以应该尽可能地减少等待时间。 -
如果你使用了 Web Font 服务（如 Google Fonts）：
建议使用
swap或fallback。 Web Font 服务通常会提供 CDN 加速，字体加载速度相对较快，使用swap或fallback能更好地利用这些优势。
font-display 的实际应用：代码示例
了解了理论知识，接下来，我们来看看如何在实际代码中使用 font-display。
假设我们想使用一款名为 "MyCustomFont" 的字体，可以在 CSS 中这样定义：
@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2'),
url('MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 使用 swap 策略 */
}
body {
font-family: 'MyCustomFont', sans-serif; /* 指定字体 */
}这段代码的意思是：
- 使用
@font-face定义了一个名为 "MyCustomFont" 的字体。 - 指定了字体的源文件（woff2 和 woff 格式）。
- 设置了字体的粗细和样式。
- 使用了
font-display: swap策略，表示在字体加载期间先显示备用字体，等到字体加载完毕再切换到目标字体。 - 在
body元素中指定了字体为 "MyCustomFont"，如果 "MyCustomFont" 加载失败，则使用sans-serif作为备用字体。
你可以根据实际情况，修改 font-display 的值，选择合适的策略。
例如，如果你想使用 fallback 策略，可以这样写：
@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2'),
url('MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: fallback; /* 使用 fallback 策略 */
}需要注意的是，fallback 策略有一个可选的 block 和 swap period。这两个 period 允许你更精细地控制字体加载的行为。具体用法可以参考相关文档。
font-display 的最佳实践：一些小技巧
除了选择合适的 font-display 值，还有一些小技巧可以帮助你更好地优化字体加载：
-
选择合适的字体格式：
不同的字体格式，加载速度和兼容性也不同。一般来说，woff2 格式的字体加载速度最快，兼容性也最好，是首选。 如果需要兼容老版本的浏览器，可以同时提供 woff 格式的字体。
-
对字体文件进行压缩：
可以使用一些工具，对字体文件进行压缩，减小文件大小，提高加载速度。
-
使用 CDN 加速：
将字体文件放在 CDN 上，可以利用 CDN 的缓存和加速功能，提高字体加载速度。
-
预加载字体：
可以使用
<link rel="preload">标签，预加载字体文件，让浏览器提前开始加载字体，减少等待时间。例如：
<link rel="preload" href="MyCustomFont.woff2" as="font" type="font/woff2" crossorigin> -
监控字体加载性能：
可以使用浏览器提供的开发者工具，监控字体加载的性能，找出瓶颈，进行优化。
总结：让你的网站字体加载不再“迟到”
font-display 是一个非常强大的 CSS 属性，它可以让你更好地控制字体加载过程，优化用户体验。
记住，没有一种策略是万能的，你需要根据你的网站特点、用户群体和字体重要性，进行综合考虑，制定一个最适合你的方案。
希望这篇文章能帮助你更好地理解 font-display，并将其应用到你的实际项目中，让你的网站字体加载不再“迟到”，给用户带来更好的体验。
最后，祝你的网站越来越漂亮，用户越来越多！