web字体加载优化核心是控制显示时机与兜底策略：用font-display（swap/fallback/optional）管理渲染行为，preload关键字体，子集化中文字体，配合强缓存、cdn及brotli压缩。
Web 字体加载阻塞页面文本渲染，是造成 FOIT（空白闪动）和 CLS（布局偏移）的主因之一。优化核心不是“不让字体加载”，而是“不让它拖慢用户第一眼看到内容”。关键在于控制字体何时显示、是否等待、用什么兜底。
用 font-display 精准控制显示行为
这是最直接、兼容性好、见效快的手段。在 @font-face 中声明 font-display，告诉浏览器“别卡着等我”：
- swap：推荐首选。文本立刻用系统字体显示，字体加载完自动替换，无白屏，但可能有轻微重排（FOUT）。适合大多数正文场景。
- fallback：更保守。最多隐藏文本 100ms，之后用系统字体显示；若 3 秒内字体仍未加载，就不再替换。兼顾感知速度与一致性。
- optional：适用于非关键文字（如装饰性标题）。首次访问大概率用系统字体，后续缓存命中才用 Web 字体，彻底规避 FOIT/FOUT。
提前触发字体请求，不等渲染时才拉
浏览器默认只在真正需要渲染某段文字时才发起字体请求，容易滞后。可通过 <link rel="preload"> 主动预取关键字体：
- 只对首屏必需的字体（如标题、导航文字所用）做 preload，避免浪费带宽。
- 必须指定
as="font"和type="font/woff2"，否则浏览器不会以最高优先级加载。 - 示例：
<link rel="preload" href="/fonts/NotoSansSC.woff2" as="font" type="font/woff2" crossorigin>（注意加crossorigin，否则字体加载会失败）。
按需加载 + 字体子集化
尤其对中文字体（如 Noto Sans SC），全量 8MB 是性能杀手。不能只靠压缩，得从使用源头减负：
- 提取首屏实际用到的字符（如标题常用字、数字、标点），生成精简子集字体（可用
glyphhanger或在线工具）。 - 将不同字重/样式拆成独立文件，按需加载（比如正文用 Regular，标题才加载 Bold）。
- 非首屏内容（如折叠区域、弹窗文案）延迟加载对应字体，或直接用系统字体兜底。
服务端配合：缓存策略与 CDN 分发
字体是静态资源，但常被忽略缓存配置：
- 确保字体文件响应头含
Cache-Control: public, max-age=31536000, immutable（一年强缓存 + immutable 避免条件请求）。 - 通过 CDN 分发字体，缩短网络传输距离；开启 Brotli 压缩（WOFF2 本身已压缩，但 CDN 可再优化传输）。
- 对支持 HTTP/2 或 HTTP/3 的站点，可考虑将关键字体内联为 base64（仅限极小字体，如图标字体），彻底消除请求。
