变量字体
最后更新 2026-11-02
- 变量字体
- 可变字体
- variable font
- 轴
- 光学尺寸
- opsz
EN中文
本页目录
静态字体是一个字重一个文件，变量字体把这条规则改成了一个文件里有一条连续的轴。对设计工作流的影响比听起来大：它改变了一个字重这个对象本身。
轴与命名实例
轴（axis） 是可调的维度，每个轴有最小值、默认值、最大值。常见的有：
| 轴 | 含义 | 典型范围 |
|---|---|---|
wght |
字重 | 100–900 |
wdth |
字宽 | 75–125（百分比） |
opsz |
光学尺寸 | 8–144 |
slnt |
倾斜 | −10–0（度） |
ital |
斜体 | 0–1 |
命名实例（named instance） 是几个轴位置的组合，配一个名字（Regular、Bold、Display）。设计软件里的样式列表通常就是这些实例。
关键点：实例只是预设，不是全部。文件里没被命名成实例的位置，技术上也能取到。
光学尺寸是最值得理解的轴
opsz（optical size）不是放大缩小，而是为不同字号单独做的设计：
- 小字号：笔画更粗、字距更开、字面框更满，否则会糊；
- 大字号：笔画更细、字距更紧、细节更多，否则会显得笨重。
传统上这靠 Text / Display 两套静态字体实现，变量字体把它变成一根连续的轴。所以 opsz=12 与 opsz=72 不只是把同一个形状缩放——笔画比例本身变了。
CSS 里一个属性就能让它跟着字号走：
h1 {
font-optical-sizing: auto;
}浏览器会根据当前的 font-size 自动取 opsz。
设计稿要怎么组织
用变量字体时，指定字重这件事变成了三种写法，交付时要统一：
- 命名实例：写 SemiBold，最稳，因为实例名会跟着文件走；
- 数值：写
font-weight: 600，实现时由 CSS 匹配； - 轴坐标：写
font-variation-settings: "wght" 600，最精确但也最不通用。
推荐：正文与 UI 用命名实例，只有确实需要取中间值时（比如比 SemiBold 再细一点）才用轴坐标，并在设计稿上写明原因。
几个容易翻车的地方
- 中间位置不一定好看：设计师只在几个关键点上校过形状，
wght: 437是自动插值的结果； - 导出 PDF / 切图：部分工具会把变量字体实例化成静态字形，如果实例没选好，导出的东西与屏幕上不同；
- 中文变量字体很少：中文字形多，做连续的轴成本高，市面上的中文变量字体远比西文少；
font-variation-settings会覆盖font-weight：两者同时出现时以轴坐标为准，容易调试不出来。
本站怎么记录
保守：一个文件算一个条目，只记它的默认字重与宽度，不把轴展开成多个字款。
原因是字款在本站是收藏与档案的标识单位，而变量字体的一款不是一个离散对象。想在某根轴上试位置，是排版测试的事。