使用@font-face引入字体需确保CORS允许、显式设置font-display（推荐swap）、回退字体栈按平台分组声明、避免强制同步布局，并注意多语言混合排版的字体闪动问题。
使用 @font-face 引入外部字体时，src 的 URL 必须可跨域访问
浏览器对字体文件有严格的 CORS 策略限制。即使 CSS 文件本身能正常加载，如果字体文件（如 .woff2）托管在不同源（例如 CDN 域名），且服务器未返回 Access-Control-Allow-Origin: * 或对应域名，字体将静默失败——文字会直接回退到系统字体，控制台可能只报一条模糊的 Failed to load resource: net::ERR_FAILED，不提示是 CORS 问题。
实操建议：
- 优先把字体文件和 CSS 放在同一域名下（如都放在
/static/fonts/），规避跨域风险 - 若必须用 CDN，请确认该 CDN 已为字体 MIME 类型（
font/woff2、font/woff）配置了正确的 CORS 响应头 - 可在 Chrome DevTools 的 Network 面板中点击字体请求，查看 Response Headers 中是否含
Access-Control-Allow-Origin
font-display 决定字体加载期间的文本渲染行为
不设 font-display 时，Chrome 等浏览器默认使用 font-display: auto，表现为：字体未加载完成时，先隐藏文字（FOIT），等字体就绪再显示——用户可能看到几秒白屏或布局跳动。这是最差体验。
推荐显式设置：
立即学习“前端免费学习笔记（深入）”；
-
font-display: swap：立即用回退字体渲染，字体加载完成后无感替换（最常用） -
font-display: fallback：短时间（100ms）内用回退字体，之后无论是否加载完都保持回退字体，避免闪动 -
font-display: optional：仅当字体已缓存才使用，否则全程用回退字体（适合非关键字体）
示例：
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var-latin.woff2') format('woff2');
font-display: swap;
}
回退字体栈要兼顾可读性、字符覆盖与系统一致性
仅写 font-family: 'MyFont', sans-serif 很危险。不同系统中 sans-serif 指向差异极大（macOS 是 San Francisco，Windows 是 Segoe UI，Linux 可能是 DejaVu Sans），导致行高、字宽、标点位置全都不一致，引发布局偏移（layout shift）。
更稳妥的做法：
- 按平台分组声明：例如
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif - 确保前几个回退字体在目标环境真实存在且支持所需字符集（尤其含中文时，避免把
SimSun放太靠后） - 中文字体需额外注意：不要依赖
Microsoft YaHei在非 Windows 设备上可用；iOS 不支持STHeiti新写法，要用Heiti SC
字体加载完成前，避免触发强制同步布局（forced synchronous layout）
如果在 JS 中监听 document.fonts.load() 后立刻读取某个元素的 offsetHeight 或 getComputedStyle().fontSize，可能触发重排（reflow），尤其在字体刚替换时，浏览器尚未完成新字体下的尺寸计算，容易卡顿或误判。
安全做法：
- 用
document.fonts.load()+Promise，但后续 DOM 操作放在requestAnimationFrame回调里 - 避免在字体加载回调中立即调用
element.getBoundingClientRect() - 如需做字体就绪后的动画，改用 CSS
@keyframes或 class 切换，而非 JS 测量驱动
真正难处理的是多语言混合排版场景：同一段文本含中英文数字，而你只加载了英文字体，中文仍走系统字体——此时 font-display: swap 对中文无效，但英文会闪动。这种细粒度控制目前没有纯 CSS 解法，得靠字体子集或服务端判断语言分发不同 CSS。
