网页字体加载优化核心是精准控制呈现时机：用font-display:swap解决FOIT/FOUT，WebFont Loader的active回调确保样式安全切换；预加载关键字体、按需子集化减体积；配合fallback与缓存机制提升容错性。
网页字体加载是影响首屏性能的关键环节，JavaScript 本身不直接加载字体，但能主动管理字体的获取、缓存与就绪时机。优化核心不是“让字体变小”，而是“让字体在对的时间、以对的方式出现”——避免白屏（FOIT）、减少闪动（FOUT），同时不阻塞渲染。
用 font-display: swap + WebFont Loader 精准控制就绪状态
单纯写 @font-face 并设置 font-display: swap 只解决“文本立即显示”，但无法知道字体何时真正可用。配合 WebFont Loader 的 active 回调，才能安全触发样式切换或动画：
- CSS 中必须显式声明：
font-display: swap;（不能依赖 WebFont Loader 自动加） - 禁用 WebFont Loader 默认 class 注入（
classes: false），避免与原生行为冲突 - 在
active回调里操作 DOM，比如移除 loading 层、添加fonts-loaded类激活高亮效果
预加载关键字体，抢占浏览器空闲带宽
对首屏必需的字体（如标题所用字体），用 <link rel="preload"> 提前声明，让浏览器在 HTML 解析阶段就发起请求：
- 指定资源类型：
as="font"，并加上crossorigin（woff2/woff 需要） - 示例：
<link rel="preload" href="/fonts/title.woff2" as="font" type="font/woff2" crossorigin> - 避免预加载非关键字体（如页脚装饰字体），防止浪费带宽
按需加载 + 字体子集化，从源头减体积
大体积中文字体（几 MB）是最大瓶颈。JS 可配合工具实现动态精简：
立即学习“Java免费学习笔记（深入）”；
- 服务端或构建时用 Fontmin 提取实际用到的字符（如从 HTML 或 CMS 内容中提取“你好世界”），生成仅含这些字的 WOFF2 文件
- 前端 JS 检测用户语言或区域，只加载对应字集（如简体中文用户不加载繁体字形）
- 对图标字体，用 SVG symbol 替代字体文件；或用 Fontmin 合并 SVG 图标为最小字体包
利用缓存与 fallback 机制提升容错性
字体加载失败不应导致内容不可读：
- 检查
figlet.loadedFonts()或自定义缓存对象（如window.fontCache），避免重复 fetch - 设置
inactive回调降级：加载失败时自动切回系统字体栈，并记录错误供监控 - 对多字体场景（如标题用 A、正文用 B），分开配置 WebFont.load，失败互不影响
