在现代网页设计中，排版 (Typography) 是决定品牌身份的核心要素。然而，与应用美观字体同样重要的是加载性能。当页面刷新时，文本暂时消失后又突然出现 (FOIT)，或者从默认字体突然跳变到 Web 字体 (FOUT)，这些现象都会干扰用户的沉浸感，降低网站的可信度。
Web 字体加载的顽疾：FOIT 与 FOUT
Web 字体只有在浏览器解析完 CSS，并识别出需要该字体的文本元素即将渲染时，才会开始下载。这个过程中的时间差导致了两种主要的视觉问题。
1. FOIT (Flash of Invisible Text)
这是指浏览器在下载字体期间完全隐藏文本的行为。Chrome、Safari 和 Firefox 等现代浏览器在字体加载完成前最多会隐藏文本 3 秒。如果 3 秒后仍未加载成功，则显示系统默认字体。对于用户而言，这种“白屏”式的体验非常糟糕。
2. FOUT (Flash of Unstyled Text)
这种方式是指在字体下载完成前，先使用系统默认字体显示文本，下载完成后再替换为 Web 字体。虽然文本能立即显示，但由于不同字体的字号、行间距差异，会导致页面布局发生剧烈抖动。
“Web 性能优化的核心不仅仅是提高速度，更在于多快能为用户提供视觉上的稳定性。”
利用 font-display 属性进行控制
CSS 的 font-display 属性是控制浏览器在字体加载不同阶段渲染行为的最强有力工具。合理配置此属性可以大幅提升用户体验。
@font-face {
font-family: 'MyWebFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap; /* 核心属性 */
}
-
✅
auto: 交由浏览器默认处理（通常会导致 FOIT）。
-
🔄
swap: 强制使用 FOUT 模式。立即显示备用字体，加载完成后替换。这是最推荐的方式。
-
⏹️
block: 强制使用 FOIT 模式。在字体加载前隐藏文本（仅适用于品牌 Logo 等必须字体的场景）。
-
⏳
fallback: 仅在极短时间内（约 100ms）隐藏文本，之后显示备用字体。
字体格式优化：WOFF2 与子集化
减小字体文件本身的体积是提高加载速度的根本。中文等复杂字符集的字体包往往非常庞大，包含数万个字符。
1. 使用 WOFF2 格式
WOFF2 (Web Open Font Format 2) 比 WOFF 提供约 30% 更高的压缩率。由于现代浏览器均已支持，应将其作为首选。遵循标准的 Google Fonts 等服务也默认采用该格式。
2. 制作字体子集 (Subset)
由于实际页面通常只用到几百个常用汉字，我们可以通过字体子集化技术，剔除冷僻字符，仅保留页面所需的字符。这能将数 MB 的字体包压缩至几百 KB，实现秒开效果。
利用 Preload 提升加载优先级
默认情况下，浏览器只有在发现实际文本元素后才会请求字体。使用 link rel="preload" 可以命令浏览器在 HTML 头部就开始下载字体，抢占网络带宽。
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
需要注意的是，应仅为关键路径上的字体（如首屏标题）使用预加载。盲目预加载所有字体反而会拖慢首屏渲染。另外，必须包含 crossorigin 属性以避免重复下载。
实战加载策略：提升感知体验
除了技术优化，还需要一些提升心理稳定性的策略。
1. 优先使用本地字体
如果用户设备已安装该字体，则无需下载。在 CSS 中优先声明 local()。
2. 匹配备用字体度量
通过调整备用字体的字号和字间距，使其与 Web 字体高度接近，最大限度减少替换时的跳动感。
构建稳健的字体堆栈
即使 Web 字体加载失败，也必须确保良好的阅读体验。请按优先级排列 系统字体堆栈 (Font Stack)，例如在中文环境下依次部署 PingFang SC, Microsoft YaHei, Noto Sans SC 等。
结语：速度即竞争力
Web 字体加载优化不仅仅是为了视觉上的美观，更是决定用户对网站第一印象的关键。遵循 font-display: swap 的基本原则，应用 WOFF2 子集化，并在关键时刻使用 Preload。只要掌握这三点，您的网站体验将获得质的提升。
现在就打开性能测试工具，检查您的 LCP 得分是否受到了字体的拖累。参考本文策略，逐步优化您的网站性能。
与 FreeImgFix.com 一起开启极速网页体验！