font-display: swap 是响应式字体加载的默认起点，因小屏设备弱网弱CPU下block或auto会白屏约3秒，swap用系统字体即时渲染、加载完再替换，虽有布局偏移但优于白屏；需搭配合理回退链、各字重单独声明、WOFF2子集及preload+crossorigin等协同优化。
font-display: swap 为什么是响应式字体加载的默认起点
因为小屏幕设备普遍带宽弱、CPU弱，font-display: block（或未声明时 Chrome 的 auto 行为）会强制白屏约 3 秒，用户根本等不到字体加载完成。而 swap 让系统字体立刻撑起文字布局，自定义字体加载完再无感替换——布局偏移虽存在，但比白屏更可接受。
注意这不是“完美方案”，而是权衡后的底线选择：
-
swap必须搭配合理的font-family回退链，比如font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;，避免在某些 Android 或旧版 iOS 上 fallback 到过粗/过细的系统字体 - 同一字体族的不同字重（如 400 和 700）必须各自声明
@font-face并单独写font-display: swap，否则只声明一次会导致部分字重回退失效 - 在高 DPR 屏幕（如 iPhone 15 Pro）上，若 WOFF2 文件未做子集切分，即使
swap也掩盖不了首屏渲染后字体突然变重的视觉跳变
optional 在响应式场景下几乎不可用，除非你明确放弃低端设备
font-display: optional 要求字体必须在 100ms 内加载完成才启用，否则全程 fallback —— 这在 3G/弱 Wi-Fi 下基本不可能。Safari 14.1+ 才稳定支持它，更早版本会直接退化成 block，导致响应式页面在 iPad mini（A12，iOS 15）上白屏。
它只适合一种情况：非关键装饰性字体，且你已通过 @supports (font-display: optional) 做了降级兜底。例如：
@supports (font-display: optional) {
@font-face {
font-family: 'BrandDisplay';
src: url('/fonts/brand-display.woff2') format('woff2');
font-display: optional;
}
}
但别把它用在正文、按钮、表单标签这类用户必须读取的内容上。
preload + font-display 的顺序和 crossorigin 容易被忽略
想让关键字体更快出现在首屏， 是必要配合项，但顺序错了就白搭：
-
必须放在之前，否则浏览器解析 CSS 时已触发字体请求，preload 失效 - 如果字体文件跨域（比如托管在 cdn.example.com），
必须加crossorigin属性，否则字体不会被复用到后续@font-face加载中 - preload 的
as="font"和type="font/woff2"缺一不可，否则 Chrome 不会按字体优先级调度
正确写法示例：
<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
响应式断点变化时字体闪动，问题往往不在 font-display
设了 font-display: swap 却在横竖屏切换、缩放或媒体查询触发时看到明显字体跳变，大概率不是 swap 没生效，而是：
- CSS 中用了
em或%做font-size单位，媒体查询改了父级字号，导致字体重排放大/缩小，叠加字体替换形成双重跳变 - 没配
font-optical-sizing: auto，Variable Font 在不同字号下未自动启用光学尺寸优化，小字号下字形发虚、大字号下笔画粘连，视觉上像“换了一套字体” - 多个
@font-face声明中font-weight范围重叠（如一个写100 900，另一个写400），浏览器匹配逻辑混乱，导致断点切换后意外 fallback 到非预期字重
真正影响响应式字体体验的，从来不只是“要不要显示”，而是“在什么条件下、以什么精度、用哪一套后备策略去显示”。font-display 只是开关，不是调音台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
