多语言 WordPress 字体加载与体积：多语言字体按需加载策略

引言：一套中文字体 10MB 起步

英文站用一个 20KB 的 woff2 就够，中文站光常规字重就可能上 10MB，日韩也类似。多语言站若一次性加载所有语言字体，首屏直接崩。

原理分析：为什么字体是大头

中文字符集超两万，全量字体文件极大；而拉丁语系仅百字符。解决方案核心是”子集化（subset）”——只打包页面实际用到的字符，以及”按语言加载”——当前语言才请求对应字体。unicode-range 是 CSS 原生机制，让浏览器只下载命中的子集。

保姆级实操

1. 子集化工具：用 pyftsubset（fonttools）按语言字符表裁剪：

pyftsubset NotoSansCJK-Regular.ttf --text-file=zh.txt --output-file=zh-subset.woff2 --flavor=woff2

2. CSS unicode-range：为每种语言定义 @font-face 并设 unicode-range，如中文 U+4E00-9FFF。
3. Google Fonts 参数：用 &subset=cyrillic 等按需引入，避免加载全部。
4. Variable Font：用可变字体单文件覆盖多字重，减少请求数。
5. 字体预加载：仅 preload 当前语言首屏字体，其余 font-display:swap。

常见踩坑

• 案例：某站同时 <link> 了中、日、韩、阿四套全量字体，首屏下载 28MB，LCP 6s，改用子集后 1.2MB。
• 子集漏字，某些文言字显示为方框（豆腐块）。
• 用 unicode-range 但没设 font-family 回退，缺字无兜底。
• Google Fonts 没带 display=swap，字体加载期文字不可见（FOIT）。

总结

多语言字体 = 子集化 + unicode-range + 按需预加载。务必为每个语言单独打包子集并设回退。字体体积也直接影响 多语言站点Core Web Vitals，是 LCP 的关键变量。