font-display: swap 是防止 foit 的刚性底线配置，必须写在 @font-face 中，否则 chrome 默认 block 导致文字空白 3 秒，safari 行为更不可控。
font-display: swap 是必须加的底线配置，不写它，Chrome 默认走 block 行为——文字空白 3 秒，Safari 行为更难预测。这不是“优化项”，是防止 FOIT（文字闪白）的刚性要求。
第三方字体用 <link> 引入时，font-display 怎么生效
Google Fonts 等服务默认不暴露 @font-face 规则，你没法直接写 font-display。必须改用显式加载方式：
- 禁用
<link href="https://fonts.googleapis.com/css2?...">这类自动 CSS 注入方式 - 手动请求字体 CSS，并在 HTML 中用
<link rel="stylesheet">加载（确保它在主样式表之前） - 或更推荐：用
@import在主 CSS 开头导入，但要确认该 CSS 文件里已声明font-display: swap - 查 Google Fonts 的实际返回内容，它通常已含
font-display: swap（2026 年主流版本默认开启），但需验证——打开 DevTools → Network → 找到字体 CSS 请求 → 查看响应体中是否有该声明
preload 第三方字体时为什么总失败
对 Google Fonts 这类跨域服务，<link rel="preload"> 极易失效，常见原因：
- 没加
crossorigin属性：字体资源受 CORS 限制，不声明就无法预加载 - 路径不匹配：
href必须和后续@font-face中src的 URL 完全一致（包括查询参数，如&display=swap） - 用了
https://fonts.gstatic.com/...但没配crossorigin="anonymous"，浏览器直接忽略预加载 - 字体格式未限定：Google Fonts 返回的可能是 WOFF2 或 WOFF，但预加载只应指定
type="font/woff2"，否则可能降级失败
正确示例：<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTe6lX0g7x14QyN9C.woff2" as="font" type="font/woff2" crossorigin="anonymous">
fallback 字体链写错，swap 就等于白设
写了 font-display: swap 还看到文字“跳一下”，不是动画问题，是回退字体和 Web Font 度量值差异太大，导致重排（CLS）。关键在 fallback 链：
- 必须同类型：比如
"Inter", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif全是无衬线；混入"Georgia"会放大跳变 - 中文字体要分平台写全：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif - 避免只写英文 fallback 期望它覆盖中文——浏览器会 fallback 到系统默认中文字体，度量不可控
- 不要依赖
sans-serif末尾兜底：它在不同系统上指向完全不同字体（macOS 是 Helvetica，Windows 是 Arial，Linux 可能是 DejaVu），字宽偏差常超 15%
真正棘手的是字体度量对齐——size-adjust 和 ascent-override 能微调，但仅 Chrome 支持，且需精确测量原始字体的 metrics。多数项目应优先收窄 fallback 链，而不是押注实验性 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
