字体性能优化需协同加载时机、格式选择、子集提取与构建流程：优先用WOFF2及可变字体，中文字体必须子集化，配合preload、font-display:swap和fallback，并集成至构建工具自动化闭环。
字体文件加载慢，核心在于字体资源体积大、请求阻塞渲染、缺乏缓存策略或未合理预加载。解决关键不是单纯压缩字体，而是从加载时机、格式选择、子集提取和构建流程协同优化。
优先使用现代字体格式 + 可变字体
WOFF2 比 WOFF 体积小 30% 以上，是目前兼容性与性能兼顾的最佳选择。若项目支持（Chrome 69+、Safari 12.1+、Firefox 65+），可直接用可变字体（Variable Fonts）替代多套静态字体（如 Regular / Bold / Italic），单个文件覆盖整个字重/字宽轴，大幅减少请求数和总大小。
- 构建时用 fonttools 或 google-fonts-helper 转换 TTF → WOFF2
- 用 font-variations 工具检查并导出最小变量轴（如仅保留 weight 轴）
- CSS 中声明：
@font-face { font-family: 'Inter'; src: url('inter.woff2') format('woff2-variations'); font-weight: 100 900; }
按需子集化（Subset）中文字体
中文字体动辄几 MB，但网页通常只用几百个汉字（标题、按钮、常用词）。必须做子集提取，否则再快的网络也扛不住 4MB 字体下载。
- 构建阶段用 pyftsubset（fonttools）或 fontmin-webpack 插件，基于 HTML/JS 中实际出现的文本生成字符集
- 配合 iconfont 场景：把图标 SVG 转为字体时，只打包用到的 icon Unicode 码点
- 注意保留常用标点、数字、英文字母及空格，避免渲染异常
控制加载行为：preload + display=swap + fallback
默认 font-display: auto 在 Chrome 中会阻塞文本渲染长达 3 秒，用户看到空白或闪烁。必须显式声明加载策略。
立即学习“前端免费学习笔记（深入）”；
- 关键字体用
提前触发请求（注意加crossorigin） - @font-face 中设
font-display: swap：先用系统字体渲染，字体加载完成立即替换，无白屏 - 定义合理的 fallback 字族，如
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
构建工具集成自动化流程
手动处理字体易遗漏、难维护。应将字体优化嵌入 Webpack/Vite 构建链：
- Vite：用 vite-plugin-fonts 自动下载、转码、子集、注入 preload
- Webpack：搭配 file-loader + fontmin-webpack + html-webpack-plugin 注入 preload 标签
- CI 阶段加入字体体积监控（如用 size-limit），超阈值自动报错
不复杂但容易忽略：字体不是“放上去就行”的静态资源，它参与渲染流水线关键路径。每次新增字体，都应走一遍子集→转码→preload→display 控制闭环。
