必须用 font-display 控制字体加载行为，推荐 swap 值；优先 preload WOFF2 字体并设 crossorigin；用 document.fonts.load() 主动检测加载状态。
字体加载阻塞渲染，必须用 font-display 控制行为
HTML5 页面中引入自定义字体（如通过 @font-face）后，浏览器默认会延迟文本渲染，直到字体加载完成或超时（通常 3 秒），导致 FOIT（Flash of Invisible Text）。这不是 bug，而是规范行为。关键解法是显式设置 font-display 值。
常用取值与效果：
-
font-display: swap：立即用备用字体显示，字体加载完后“换”成目标字体（最常用，兼顾可读性与品牌一致性） -
font-display: optional：只在字体缓存命中时使用，否则全程用备用字体（适合非关键字体，如装饰性标题字） -
font-display: block：保持默认行为（短阻塞期 + 长无样式期），不推荐
示例：
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.woff2") format("woff2");
font-display: swap;
}
避免 @import 加载字体，改用
@import 在 CSS 中加载字体文件会触发额外的网络请求链路，且无法被预加载识别，造成加载时机不可控。真实项目中应把字体资源提前声明为高优先级。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 在
中添加，指定as="font"和type="font/woff2" - 确保
crossorigin属性存在（即使字体同源），否则字体可能被浏览器忽略 - 仍需保留
@font-face声明，preload只负责提前获取，不替代它
示例：
WOFF2 是当前唯一应上线的格式，别再打包 TTF / EOT
WOFF2 提供平均 30%~50% 的体积压缩率，且所有现代浏览器（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+）均已原生支持。继续提供 TTF、EOT 或 WOFF 1 是冗余负担，增加 HTTP 请求量和 CDN 缓存压力。
实操建议：
- 构建流程中用
web-font-generator或fonttools将原始字体转为 WOFF2，丢弃其他格式 - 检查响应头：确保服务器对
.woff2文件返回Content-Type: font/woff2 - 若需兼容 IE11，单独处理（但 IE11 已退出主流支持周期，不建议为它妥协架构）
字体加载失败时 fallback 行为不可靠，得用 document.fonts.load() 主动检测
仅靠 font-display: swap 不能解决「字体始终加载失败」的问题——比如 CDN 故障、路径错误、CORS 拦截。此时用户看到的仍是备用字体，但你无法得知是否异常，也无法做降级提示或上报。
可用 document.fonts.load() 手动探测：
- 返回 Promise，成功表示字体已加载或可用（含缓存）
- 失败则说明加载出错，可记录日志、切换字体族、或展示提示
- 注意：该 API 不触发新加载，只检查状态；如需强制加载，需配合
new FontFace()+fontFace.load()
示例：
document.fonts.load("16px Inter").then(() => {
console.log("Inter loaded");
}).catch(err => {
console.warn("Inter failed to load", err);
document.body.classList.add("font-fallback");
});
字体加载不是“加个 link 就完事”的环节，真正棘手的是跨浏览器的加载时序差异、缓存策略与错误静默。尤其当字体用于关键按钮或表单标签时，一次加载失败就等于一次可访问性退化——这点很容易被 Lighthouse 报告忽略，但用户感知极强。 
