font-display: optional: 字体加载的终极佛系指南
作为一名常年与代码打交道的“码字匠”，我深知网页字体的重要性。字体选得好，网页如虎添翼，赏心悦目；字体选不好，轻则影响美观，重则影响用户体验，让人想摔鼠标。
以前，为了解决网页字体加载慢的问题，我们可谓是八仙过海，各显神通。从传统的@font-face到各种字体加载优化策略，比如CDN加速、字体格式转换、子集化等等，无所不用其极。然而，总有一些“疑难杂症”让我们挠头：
- FOIT (Flash of Invisible Text)：字体加载慢，文字一片空白，用户一脸懵逼。
- FOUT (Flash of Unstyled Text)：先显示默认字体，等自定义字体加载完毕，页面突然“跳跃”一下，体验极差。
为了解决这些问题，CSS 规范中引入了 font-display 属性，它就像一个字体加载的“指挥官”，控制着字体在不同加载阶段的行为。font-display 有五个可选值：auto、block、swap、fallback 和 optional。
今天，我们要聊的主角就是 font-display: optional，这个属性可以说是一个“佛系”的选择，它追求的是一种“润物细无声”的字体加载体验，让用户在不知不觉中感受到字体带来的美感，而不是被字体的加载过程所打扰。
optional 的 “佛系”哲学：能加载就加载，不能加载就算了
font-display: optional 的核心思想是：如果字体能在极短的时间内加载完成，那就显示自定义字体；如果加载时间稍长，那就直接显示系统字体，不要让用户等待。
这个“极短的时间”通常指的是 100ms 左右。如果字体能在 100ms 内加载完成，那用户几乎不会察觉到任何延迟，直接看到的就是美美的自定义字体。但如果超过这个时间，浏览器就会直接放弃加载自定义字体，转而显示系统字体。
这种策略非常适合那些对页面初始渲染速度要求极高的场景。比如，对于移动端网页来说，如果字体加载导致页面首屏渲染时间过长，用户很可能直接关闭页面。使用 font-display: optional 可以确保页面内容能够快速呈现，牺牲一点字体的美观性，换来更好的用户体验。
举个例子，假设你的网站使用了一种非常漂亮的自定义字体，但这种字体文件比较大，加载速度比较慢。如果使用 font-display: swap，用户可能会先看到默认字体，然后突然切换到自定义字体，这种“闪烁”的效果会非常影响用户体验。而如果使用 font-display: optional，如果字体能在 100ms 内加载完成，用户就能直接看到漂亮的自定义字体；如果加载时间超过 100ms，用户就会看到系统字体，虽然字体可能没那么漂亮，但至少不会出现“闪烁”的情况，保证了页面的流畅性。
optional 的适用场景：那些对速度有极致追求的场合
font-display: optional 最适合以下几种场景：
- 移动端优先的网站：移动网络环境复杂多变，字体加载速度很难保证。使用
optional可以确保页面在各种网络环境下都能快速呈现，避免用户流失。 - 单页应用 (SPA)：SPA 通常需要在首次加载时加载大量的 JavaScript 和 CSS 文件，如果再加上字体文件，可能会导致加载时间过长。使用
optional可以减少字体加载对首屏渲染的影响。 - 内容展示为主的网站：对于那些以内容展示为主的网站，比如新闻网站、博客等等，内容的快速呈现比字体的美观性更重要。使用
optional可以确保用户能够第一时间看到内容，而不是等待字体加载。
当然，optional 并不是万能的。对于那些对字体美观性要求极高的网站，比如设计类网站、艺术类网站等等，可能需要牺牲一些加载速度，选择 font-display: swap 或 font-display: block。
optional 的使用方法：简单易懂，一学就会
使用 font-display: optional 非常简单，只需要在 @font-face 规则中添加 font-display: optional 即可。
@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: optional; /* 关键的一行 */
}
body {
font-family: 'MyCustomFont', sans-serif;
}这段代码的意思是：首先定义一个名为 MyCustomFont 的自定义字体，然后指定字体文件的路径和格式。最关键的是 font-display: optional 这一行，它告诉浏览器，如果字体能在 100ms 内加载完成，那就显示 MyCustomFont，否则显示 sans-serif (系统字体)。
optional 的一些注意事项：别忘了 “兜底” 字体
在使用 font-display: optional 的时候，一定要注意 “兜底” 字体。所谓 “兜底” 字体，就是在 font-family 属性中，除了自定义字体之外，还要指定一个或多个系统字体。
body {
font-family: 'MyCustomFont', sans-serif;
}在这个例子中，sans-serif 就是一个 “兜底” 字体。如果 MyCustomFont 加载失败，浏览器就会自动使用 sans-serif 来显示文字，保证页面内容的可读性。
选择 “兜底” 字体的时候，最好选择与自定义字体风格相似的系统字体，这样可以减少字体切换带来的视觉冲击。
optional 的进阶用法：配合 Font Loading API，更加灵活可控
虽然 font-display: optional 已经足够简单易用，但有时候我们可能需要更精细的控制。比如，我们可能希望在字体加载完成后，再执行一些额外的操作，比如显示一个加载成功的提示信息，或者更新页面的样式。
这时候，就可以配合 Font Loading API 来实现更灵活的字体加载控制。Font Loading API 是一组 JavaScript API，可以用来检测字体加载的状态，并在字体加载完成后执行回调函数。
document.fonts.load('1em MyCustomFont').then(function() {
// 字体加载完成，执行一些操作
console.log('MyCustomFont 加载完成！');
// 可以更新页面样式，显示加载成功的提示信息等等
});这段代码的意思是：首先使用 document.fonts.load() 方法来加载 MyCustomFont 字体。load() 方法返回一个 Promise 对象，当字体加载完成后，Promise 对象就会被 resolve，然后执行 then() 方法中的回调函数。
通过 Font Loading API，我们可以更加精确地控制字体加载的过程，实现更加个性化的用户体验。
optional 的未来展望：字体加载的 “最佳实践”？
font-display: optional 作为一种 “佛系” 的字体加载策略，在追求极致速度的场景下具有很大的优势。随着移动互联网的普及，以及用户对页面加载速度的要求越来越高，optional 有望成为字体加载的 “最佳实践” 之一。
当然，optional 并不是唯一的选择。在不同的场景下，我们需要根据实际情况选择合适的 font-display 值，才能达到最佳的字体加载效果。
总之，font-display: optional 就像一位 “默默奉献” 的幕后英雄，它在不打扰用户的前提下，尽可能地提升字体加载速度，改善用户体验。下次你在优化网页字体加载的时候，不妨试试 font-display: optional，也许它会给你带来意想不到的惊喜。
希望这篇文章能让你对 font-display: optional 有更深入的了解。记住，选择合适的字体加载策略，就像选择合适的武器一样，可以让你在网页开发的世界里更加游刃有余。祝你编码愉快！