font-display: swap 是 CSS @font-face 规则中的属性，指示浏览器先用系统字体渲染文字、再替换为自定义字体，从而避免阻塞页面渲染；它必须显式写在每个 @font-face 块中，不可继承或通过类添加，能显著提升首屏可读性但需注意 fallback 字体匹配与文件体积优化。
font-display: swap 是什么，为什么它能解决阻塞问题
浏览器默认会等外部字体加载完成才渲染文字，导致页面“空白”或“闪动”。font-display: swap 告诉浏览器：先用系统字体撑开布局，等自定义字体就绪再替换——不卡主渲染流。
它不是万能的，但对首屏文字可读性提升最直接。关键在于：它只作用于 @font-face 规则，且必须写在字体声明里，不能靠 CSS 类或内联样式补救。
常见错误现象：
– 页面加载时标题长时间显示为方块或空白
– Lighthouse 报“Avoid enormous network payloads”或“Ensure text remains visible during webfont load”
– 开发者工具 Network 面板看到 .woff2 请求排在 HTML 后、阻塞了 DOMContentLoaded
怎么给 @font-face 正确加 font-display: swap
必须在每个 @font-face 块中显式声明 font-display: swap，不能继承、不能省略。否则浏览器按默认 auto（行为因浏览器而异，Chrome 通常等字体）处理。
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-v12-latin.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* 必须在这里 */
}
注意点：
– font-display 不支持 IE，但 IE 本身不支持 @font-face 的现代语法，实际影响小
– 多个字重/样式需分别写 @font-face，每个都要加 font-display: swap
– 如果用了 font-display: optional，字体可能完全不加载（适合非关键字体），但 swap 更稳妥
swap 和 fallback 字体不匹配导致的视觉跳变
启用 swap 后，系统字体和 Web 字体宽度、行高、字间距不同，文字重排（reflow）会造成“抖动”，尤其在段落或按钮中明显。
缓解方法：
– 用 font-size-adjust 控制 x-height 一致性（支持度一般，仅 Firefox/Chrome 120+）
– 手动选一个“占位感接近”的系统字体栈，比如 Inter 可 fallback 到 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
– 对关键文案（如标题）加 size-adjust 或固定 line-height，避免高度突变
– 避免在 font-family 中混用衬线与无衬线字体，比如 'Times New Roman', 'Inter' 容易跳
CDN 或字体服务（如 Google Fonts）怎么配 swap
Google Fonts 默认不启用 swap，必须手动加参数。直接改链接比自己托管更省事，但要注意版本和子集参数位置。
原始链接：https://fonts.googleapis.com/css2?family=Inter
加 &display=swap 后：https://fonts.googleapis.com/css2?family=Inter&display=swap
要点：
– 参数必须是 display=swap，不是 font-display=swap
– 如果用了 text=... 或 subset=...，display=swap 要放在最后，否则可能被截断
– 自托管时若用 preload，记得加 as="font" 和 type="font/woff2"，否则预加载无效
容易被忽略的一点：字体文件本身体积仍会影响带宽和缓存。即使用了 swap，如果 .woff2 文件超 100KB，移动端弱网下首次加载延迟依然明显——这时候得配合子集化或 unicode-range 拆分。
