设计 · 文章
可变字体:一个文件装下全部字重,加载还更快
「Light/Regular/Bold 三档」是文件格式造成的妥协,不是排版学的选择。可变字体用一个文件覆盖连续字重轴,请求数更少、总字节更小,还解锁字重过渡动画和暗色模式微调这类细节。
一个文件覆盖字重、字宽、光学字号等连续轴,不再为每个字重单独请求Google Fonts 上的思源黑体(Noto Sans SC)已提供可变版本,字重 100–900 连续可调font-variation-settings 可插值,字重过渡第一次能做进 CSS 动画
设计系统里的「Light / Regular / Bold 三档」不是排版学的选择,是文件格式的妥协:静态字体一个字重一个文件,请求数和授权成本都逼着设计师做减法。可变字体把这套约束拆掉了——一个文件内含连续的字重轴,250 到 900 之间任意取值。 原理一句话:字形轮廓以数学函数存储,渲染时按轴的取值插值,一份轮廓即可表达整条字重曲线。除了字重,字宽、光学字号、斜体都可以做成轴。Google Fonts 上的思源黑体(Noto Sans SC)已提供可变版本,中文字重终于可以细调,不必在「细体」和「中等」之间二选一。 工程收益同样明确:从请求 4 个静态字重文件变成请求 1 个可变文件,总字节数通常更小;配合 optical sizing,标题在大字号下自动收窄笔画;暗色模式下给文字微调半档字重这种细节,也终于不用设计师逐页标注。 三个注意事项:中文要先做子集化(fonttools 按需切包),否则单文件体积会反噬性能;极老浏览器仍需静态字体回退;部分可变字体在非默认字重的小字号渲染略糊——正文场景先实测再上线。