用 unicode-range 给中文可变字体做按需加载

中文字体的问题是「字多」。常用汉字三千个起，一套完整字库轻松十几兆，整包丢给浏览器，首屏还没渲染完字体就先卡住了。unicode-range 的思路是把字库按 Unicode 区间切开，浏览器只下载页面上真正用到的那些分片。

先量清楚要付多少流量

一份 12MB 的思源黑体整包，在 4G 网络下要跑三到五秒。而首屏真正出现的汉字往往不到两百个，为了这两百个字付十几兆的代价，显然不划算。

按 Unicode 区间切片

unicode-range 是 @font-face 的描述符，用来声明「这一片只负责这些码位」。把字库按区间切成一百多个小文件后，浏览器解析 CSS 时就能算出页面实际用到的码位，只拉命中那几片。

@font-face {
  font-family: 'SourceHanSans';
  src: url('hans-012.woff2') format('woff2');
  unicode-range: U+4E00-4E7F;
}

顺便把字重也收掉

切片之后还有一层浪费：字重。中文可变字体一个文件就能覆盖 100 到 900 整个区间，比每个字重单独打包省得多。两者叠加时记得让切片区间保持一致，否则浏览器的字体匹配会反复回退，反而更慢。

首屏字体流量从 12MB 降到 240KB，FCP 提前了 0.9 秒。