AI 摘要：本文系统介绍了中文字体网络优化的全流程方案，涵盖字体分包、格式选择、CDN 加速、协议优化、代码级调优等核心环节，通过WOFF2格式切割、高并发 CDN、HTTP/2/3协议、Preconnect 预连接、极小量级加载及CLS布局偏移修复等技术，显著提升网页加载速度与用户体验。

1. 字体分包优化
• 工具推荐：使用 cn-font-split 插件或 vite-plugin-font （适配 Vite / Rspack / Next.js ）
• WOFF2 格式优势：
• 默认采用 Brotli 压缩算法，比 WOFF 节省30%体积
• 支持浏览器广泛，现代项目首选格式
• 代码示例展示自动转换 TTF / OTF为分片 WOFF2

2. 分包切割策略
• 分片大小：建议 70KB / 片，平衡加载速度与命中率（1.5 - 2 秒完成加载）
• 动态加载：按需加载分片，避免全量下载

3. 字体下载优化
• CDN关键要求：
• 必须支持高并发（国内 CDN 可达 1 秒内加载）
• 推荐开启 HTTP / 2 / 3 协议提升并发能力
• 缓存策略：
• 字体分片设置永久缓存（哈希命名防冲突）
• CSS 文件需谨慎设置缓存时效

4. 前端代码优化
• Preconnect 预连接：提前建立 CDN 预连接节省时间
• 禁用 Preload 陷阱：避免破坏按需加载机制
• 极小量级优化：
• 通过 vite-plugin-font 扫描代码用字范围
• ?subsets 参数实现字符级摇树优化

5. 布局偏移(CLS)修复
• 问题根源：Fallback 字体与目标字体度量差异导致重排
• 解决方案：
• 使用 ascent-override 等 CSS 属性校准 Fallback 字体度量
• 工具推荐：fontaine 库（中文适配有限）或 vite-plugin-font 1.2.0+ 自动计算

扩展资源
https://web.dev/font-best-practices/
https://web.dev/reduce-webfont-size
https://web.dev/optimize-webfont-loading/