猫啃网
做一套视觉规范，标题要三档字重：常规做副标，中黑做主标，粗黑做大标题。落到文件上就是三个字体包，加起来二十多兆。网页那边更麻烦，CSS 里要写三个 @font-face，浏览器判断该下哪个，判断错还要重下。
改成一个文件装下全部档位，就是可变字体在解决的问题。它不是把几个字体压进一个压缩包，而是换了一套描述字形的方式。猫啃网收录 839 款免费中文字体，其中提供可变版本的只占一部分，拿文件前先看清标注。
一、可变字体的基本结构
核心是“一套轮廓加一套变化规则”。 传统字体每个字重都存一份完整轮廓；可变字体只存一份基准轮廓，另外记录这个轮廓在不同条件下的偏移量，渲染时按当前取值算出来。
轴（axis）是变化的维度。 字重、字宽、倾斜角度、光学尺寸都可以做成轴，每个轴有最小值、最大值和默认值。文件里有一段表专门声明轴的数量、名称和范围。
偏移量存在增量表里。 每个字形在各个关键取值上有一组偏移数据，渲染时按轴值在这些关键点之间做插值。轴值落在两个关键点之间，就按比例混合，所以得到的是连续的字重，而不是几个跳档。
还有几张表负责配套。 一张做轴值到插值位置的映射，让滑块的手感更均匀；另一组管字宽、行高、上下伸这类度量值，保证字重变化时排版不乱跳。
命名实例是给界面用的。 文件里可以预设几组常用取值，比如“Regular 400”“Medium 500”“Bold 700”，设计软件的下拉菜单读的就是这份名单。
二、几个常见轴怎么读
字重轴。 标签是 wght，常见范围 100 到 900，部分字体拉到 1000。CSS 里写 550 这种非整百的数值也能生效，这就是可变字体和静态字体直观的差别。
字宽轴。 标签是 wdth，一般用百分比表示，75 到 125 之间较常见。做窄体标题、压缩排版时不用另找一款字，调轴就行。
倾斜轴。 标签是 slnt，单位是角度，负值表示向右倾。它和真正的斜体不同，斜体是另画一套字形，倾斜是整体切变。
光学尺寸轴。 标签是 opsz，用字号数值表示。小字号自动用略粗、字腔更开的形态，大字号用笔画更细的形态，屏幕上的可读性会好一些。
等级轴。 标签是 GRAD，只调视觉粗细，不改字符宽度。需要局部加重又不想让文字重排时，这个轴比字重轴好用。
自定义轴。 用四个大写字母做标签，字体作者自己定义，比如某些字体的“圆角”“随意度”。这类轴要看字体说明书，不能凭标签猜。
三、网页里怎么用起来
先在 @font-face 里声明范围。 写 font-weight: 100 900，等于告诉浏览器这个文件覆盖了整段字重。少了这一行，浏览器可能仍按单一字重处理，加粗时去合成假粗体。
然后正常写 font-weight。 声明范围之后，标题写 700、正文写 400、强调写 550，都指向同一个文件，不需要额外的字体请求。
要用非常规轴时走另一条属性。 font-variation-settings 可以逐个指定轴值，比如字重 550 加光学尺寸 16。要注意它会覆盖 font-weight 的效果，两者混用时以它为准。
过渡动画可以直接插值。 鼠标悬停让字重从 400 走到 600，浏览器能算中间帧，静态字体做不到这一点。
子集化照做不误。 可变字体同样是中文字库，全量文件依然偏大，按页面字符裁剪的流程完全适用，裁完体积照样能压到几十 KB。
四、静态与可变怎么取舍
体积上，档位越多越划算。 三档静态等于三份轮廓，可变版本只有一份轮廓加增量数据。两档时差距不明显，四五档以上差距就拉开了。
加载请求数会减少。 一个文件替代三个文件，@font-face 少写两条，缓存也只需管一份。对首屏来说，少一次往返比少几十 KB 更有意义。
兼容性要留回落。 较老的浏览器环境不支持可变轴，会把文件按默认实例渲染，通常就是 Regular。这种回落不算崩，但设计稿里的粗标题会变细，关键位置要检查一遍。
设计软件的支持程度不一。 部分版本的软件对轴面板支持有限，只能选预设实例，不能拖滑块。交付前在自己用的版本里打开确认一次，比事后返工省事。
导出的成品文件要看。 把可变字体导进 PDF 或图片，多数情况会按当前取值固化，但个别流程会丢掉轴信息，出片前核对一遍字重是否走样。
五、拿文件时看什么
详情页有没有标注。 可变版本通常在说明里写 Variable 或 VF，有的还列出轴范围。没写的按静态多字重处理，别自己假设。
文件名里常有线索。 形如“字体名-VF”“字体名[wght]”的多半是可变版本，带 Regular、Bold 字样的基本是单个静态文件。
中文可变字体已有可选范围。思源黑体 提供可变版本，字重轴覆盖范围宽，简繁字符完整；MiSans 也有可变版本，几何骨架适合界面；鸿蒙黑体 的轴设置偏系统界面用途。做标题需要个性时，得意黑 这类单字重的字体仍是静态文件，别指望拖滑块。
协议不会因为格式变化而改变。 同一个字体家族的静态版和可变版，授权条件通常一致，但仍要按具体文件核对，尤其是对外分发和嵌入这两类场景。
授权说明
这里的“能用”，指字体文件可以在项目里正常加载并输出字形。三步核验。
第一步，确认字体全名。 可变版本和静态版本的文件名往往只差一个后缀，授权却按文件声明。记录时把版本形态一起写上，比如“某字体 VF”，别只写家族名。
第二步，查协议类型。 常见几类：开源协议（SIL OFL、MIT、GPL）、作者声明免费商用、随包附带的免费商用声明，以及带保留字体名称条款的授权。OFL 允许修改与再分发，但衍生版本要改名；作者声明的范围由声明自身界定。
第三步，核使用场景。 网页加载、印刷、视频一般都在允许范围内；把可变字体嵌进 App、电子书，或用于 Logo 商标注册，要单独确认。改轴生成的衍生文件对外发布，也算修改，要看协议是否允许。
留凭证。 字体全名、版本形态、获取日期、许可页面截图和链接记在同一个文档里。字体升级到新版本后条款可能变化，有记录才追得回来。
常见问题（FAQ）
问：用了可变字体，还要不要装多个字重？
不用。一个文件覆盖整段轴范围，设计软件里选预设实例、网页里写数值都可以。只有在需要轴范围之外的极端字重时，才考虑另配一款。
问：可变字体一定比静态文件小吗？
不一定。单档对单档，可变版本通常更大，因为它多了增量数据。它的优势在档位数量，三档以上时总体积和请求数都会更省。
问：旧浏览器打开会怎样？
会按默认实例渲染，通常是 Regular。文字照常显示，只是字重层级变弱。关键标题可以在 CSS 里给一条静态回退，或者接受这种降级。
问：滑动字重会不会让文字宽度变化，导致排版跳动？
会。字重轴改变笔画粗细时，字符宽度通常跟着变。需要避免重排时，用等级轴替代字重轴，它只改视觉粗细不改宽度。
小结
可变字体用一套基准轮廓加增量数据，把字重、字宽、倾斜这些维度变成连续的轴。网页里先在 @font-face 声明字重范围，再用 font-weight 或 font-variation-settings 取值；设计端注意软件的轴支持程度和导出结果。档位越多越划算，单档场景仍可用静态文件。用之前把全名、协议、场景核一遍，凭证留好。
