1. 为什么需要自定义字体优化
网页设计中使用非系统默认字体早已成为标配，但中文字体文件往往体积庞大——一个完整的思源黑体家族（7字重）WOFF2格式压缩后仍有8MB+，直接引入会导致首屏文字长时间空白或闪烁。去年帮某金融平台做性能审计时，就发现仅字体加载就拖慢了2.4秒LCP时间。
现代CSS的@font-face规则支持多种字体格式：
@font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'), url('font.woff') format('woff'); font-display: swap; }2. 字体格式选型实战
2.1 主流字体格式对比
| 格式 | 压缩率 | 兼容性 | 适用场景 |
|---|---|---|---|
| TTF | 100% | 全平台 | 设计稿原始文件 |
| WOFF | 40% | IE9+ | 常规网页使用 |
| WOFF2 | 30% | Chrome/Firefox | 现代浏览器首选 |
| EOT | - | IE6-8 | 必须放弃的旧标准 |
实测将思源宋体TTF转WOFF2后，文件从3.2MB降至1.1MB。转换工具推荐：
# 使用google的woff2_compress woff2_compress SourceHanSerif.ttf2.2 中文subset裁剪技巧
通过pyftsubset工具提取所需字符集：
# 保留3500常用字+当前页面文字 pyftsubset font.ttf --text="首页产品介绍..." --unicodes=U+4E00-9FA53. 加载策略深度优化
3.1 字体加载生命周期控制
const font = new FontFace('CustomFont', 'url(font.woff2)'); document.fonts.add(font); font.load().then(() => { document.documentElement.classList.add('fonts-loaded'); });配合CSS实现FOUT效果：
body { font-family: system-ui; } .fonts-loaded body { font-family: CustomFont; }3.2 资源预加载进阶方案
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>4. 企业级解决方案
4.1 CDN动态子集化
阿里云CDN支持根据URL参数动态生成字体子集：
https://cdn.example.com/font.woff2?text=产品介绍4.2 变量字体实践
单个文件包含多字重/变体：
@font-face { font-family: 'VariableFont'; src: url('font.var.woff2') format('woff2-variations'); font-weight: 100 900; }5. 监测与调优
使用web-vitals监控CLS变化：
new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log('Layout shift:', entry.value); } }).observe({type: 'layout-shift', buffered: true});关键指标：字体加载导致的CLS应<0.1，LCP差异<200ms
6. 避坑指南
- 避免在@font-face中使用local()：会触发系统字体枚举导致性能下降
- WOFF2必须设置crossorigin属性：否则可能被浏览器丢弃
- 字体缓存策略：建议设置immutable缓存（Cache-Control: max-age=31536000, immutable）
