传统字体要为每个字重准备一个文件——常规体一个，粗体一个，细体一个。可变字体（Variable Font）改变了这一点：一个文件就能包含从极细到极粗的连续变化。这不只是省文件数量，而是改变了设计和使用方式。
一、可变字体的基本原理
可变字体在一个字体文件中包含多个「母版」，并通过「轴（Axis）」定义插值规则。渲染引擎根据轴的当前取值，实时计算出对应的字形。
常见的设计轴（用小写标签表示）包括：wght（字重）、wdth（字宽）、slnt（倾斜）、ital（斜体）、opsz（光学尺寸）。此外还有注册轴之外的「自定义轴」，用大写标签表示，用于控制特定设计维度。
二、可变字体的实际收益
文件数量大幅减少。一个包含多个字重的可变字体，体积可能只有多个静态字体文件之和的一半甚至更少。对网页加载速度有明显帮助。
连续可调的字重。静态字体只能使用预设的字重（如 400、700），可变字体可以取任意值（如 450、650）。这让排版的精细度大幅提升，尤其是在需要微妙层级区分的场景。
响应式排版成为可能。结合 CSS，可以让字重随屏幕尺寸或视口宽度动态变化。例如在小屏上使用较细字重，大屏上使用较粗字重，保持相似的视觉重量。
光学尺寸的自动适配。opsz 轴可以让同一字体在标题和正文中呈现不同细节——标题字距更紧、笔画对比更强，正文字距更松、可读性更好。
三、网页中的使用方法
声明字体。在 CSS 的 @font-face 规则中，使用 font-variation-settings 或更推荐的 font-weight 范围声明。建议使用 font-weight 范围语法，因为它能更好地配合浏览器的默认排版逻辑。
调用时设定轴值。在具体元素上通过 font-variation-settings 设定轴值，例如把字重设为 450。注意 font-variation-settings 的优先级较高，可能覆盖其他字体设置，使用时要注意层级关系。
注意回退方案。虽然主流浏览器已支持可变字体，但仍建议提供静态字体作为回退，避免在旧环境中出现渲染异常。
四、使用中的注意事项
不要滥用连续调值。可变字体允许任意字重，但并不意味着设计上应该随意取值。建议在设计中确定几个固定的字重层级，保持视觉一致性。
注意渲染性能。极端轴值（如极小或极大的字宽）可能导致字形变形或渲染异常。使用前应在目标环境中测试。
检查字形覆盖范围。可变字体文件可能只包含部分字符集。如果项目需要多语言支持，要确认字体是否包含对应语言的字符。
授权依然适用。可变字体同样是字体，使用仍需遵守相应的授权范围。不要因为「只有一个文件」就忽略授权条款。
五、什么时候该用可变字体
如果项目需要在多个字重之间切换、追求网页加载性能、或者希望实现动态的响应式排版，可变字体是明显的更优选择。
如果项目只需要一到两个字重，且对加载体积不敏感，使用静态字体反而更简单直接，兼容性问题也更少。
六、可变字体的实际收益
采用可变字体最直接的收益是精简了字体文件数量。传统做法下，一款字体若要覆盖常规、中粗、粗体三种字重，需要加载三个独立文件；而可变字体把这些字重压缩进一个文件，网页端只需一次请求即可获得全部字重，显著减少加载体积与请求次数，对首屏速度敏感的站点尤为受益。
第二个收益是设计更自由。可变字体允许在字重的两端之间任意取值，设计师不再受限于”只有三档”的束缚，可以针对具体的版面密度精细调整，例如给一段略长的标题选一个比中粗稍细、比常规稍粗的中间值，让视觉更协调。第三个收益是动态效果，借助 CSS 的动画能力，字重可以随交互平滑变化，为界面增添细腻的反馈。
七、落地中的注意事项
可变字体虽好，落地仍需注意兼容与体验。一是浏览器支持，主流现代浏览器已普遍支持，但老旧环境可能无法呈现，需要提供回退方案；二是文件体积，一个包含完整轴（字重、字宽、倾斜等）的可变字体会比单字重文件更大，应通过子集化只保留实际用到的字符集；三是性能取舍，过度频繁地驱动字重动画可能带来渲染开销，要权衡视觉效果与流畅度，避免得不偿失。
建议的实践路径是：先在小范围页面试点，验证渲染效果与加载性能，再逐步推广到全站。对于中文字体，由于字符集庞大，可变字体的体积控制尤为重要，通常需要结合子集化与按需加载，才能在保证效果的同时维持良好的访问体验。
