可变字体让设计师在字体提供的范围内调整字重、字宽等参数，为不同屏幕的排版提供更多选择。一个可变字体文件可以容纳同一字体的多种变体，但可用轴、字符覆盖和文件体积因字体而异，并非每款字体都包含所有样式。实际使用时，需要把可变轴、字体授权和不同屏幕下的排版一起考虑。
字体轴的变化会影响按钮、卡片和正文区域的空间。把字体测试放进页面设计与组件协作流程，使用相同内容比较不同屏宽，才能同时检查字形、换行和组件高度。
1. 可变字体是什么意思
可变字体全称为OpenType variable fonts，是一种以一抵多的字体，它可以将同一字体的多个样式变体紧凑地封装在单个字体文件中，通过定义字体内的变化来实现单轴或者多轴设计空间，而不必加载多个字体文件。
常见的注册轴包括字重、字宽、倾斜、斜体和光学字号（也称视觉字号），具体字体可能只提供其中一部分。设计师可以在可用范围内拖动参数滑块，调整字体样式，轻松获取自己想要的字型，从而让字体排版设计更丰富、更自由，给用户更好的阅读体验。
另外，除了常见的这5个可变轴外，可变字体也可以创建独特的自定义轴，例如阴影纹理的疏密，甚至是衬线形状的变化等。
如果你想要寻找可变字体网站，千万不要错过Pixso，这款强大的在线设计协作工具支持可变字体排版，并提供设计、原型和协作能力，可以在同一份设计稿中比较不同字体参数的效果。
2. 可变字体的优势
（1）在排版设计时更灵活
在不同的屏幕、场景下，采用可变字体可以更灵活地实现字体的过渡，而不会显得特别突兀。此外，也可以根据屏幕尺寸进行响应布局。
（2）减少多样式字体的资源开销
当页面原本需要多个字重或字宽文件时，一个可变字体文件可能减少资源数量和总体积。但若页面只使用单一字重，完整可变字体也可能更大，仍需比较实际字体子集和压缩后的文件。
（3）提升品牌一致性
无论是标题还是正文，开发只需调整同一字体的轴值、字号、行高、字距等参数获得合适的字体排版效果，并在设计交付时统一记录这些参数，减少开发对字重、行高和换行规则的猜测。
（4）品牌个性化
可变字体响应了当下和未来的动态需求，品牌可以利用它创造出有趣、动态的视觉呈现效果，给品牌的视觉形象带来更加个性化的展现。
3. 如何用可变字体进行响应式设计排版
了解了可变字体的优越性，你是不是也想尝试使用可变字体来进行排版设计呢？下面以 Pixso 中的响应式网页设计为例，为你分享通过Pixso可变字体功能，完成字体排版设计的详细操作步骤。
（1）注册并登录Pixso
通过Pixso官网进行Pixso账号的登录注册，然后进入Pixso的工作台页面。
（2）在Pixso资源社区获取网页设计素材
如上图所示，本次案例所使用的网页设计案例来自Pixso资源社区，搜索关键词就可以找到该资源，然后进入资源详情页点击“复制”按钮，就可以将其复制到你的Pixso账号中并使用。
值得一提的是，Pixso资源社区拥有海量的免费设计资源，包括网页、图标、插画等，使用前应查看具体资源的授权和使用说明，除了本次案例所用的素材，你也可以将其作为你的在线素材库进行使用，非常的方便好用。
（3）调整字体为可变字体
在 Pixso 中选中文本，再选择已支持可变轴的字体。下图使用的是“Noto Sans Arabic”，后续可调整的参数以这款字体实际提供的轴为准。注意只有是可变字体才能调整可变轴，非可变字体不能调整。
（4）调整可变轴
如上图所示，点击文本后面的高级属性图标，在弹出的弹窗中选择“可变”，可以看到Noto Sans Arabic字体的可变轴可以调节字宽和字重2个参数，你可以拖动滑块进行调整。调整时同时观察文字长度、换行和行高，保留可读性后再确定轴值，而不是仅追求滑块变化的幅度。
字重、字宽和光学字号，分别解决什么问题
做响应式排版时，不要把所有轴都当成“把字变大或变小”。字重轴 wght 主要调整笔画粗细；字宽轴 wdth 调整字体自身设计的宽窄变化，不等于把整个文本框水平拉伸；光学字号轴 opsz 会为不同显示尺寸改变字形细节，不是直接设置文本的字号。字体是否包含这些轴，应先查看字体说明，再决定设计方案。
例如同一条活动标题在桌面卡片上可以保持一行，到手机上可能变成三行。先检查容器宽度、字号、行高和允许行数，再在字体确实支持字宽变化时尝试更紧凑的轴值。不能为了硬塞进一行，把文字压窄到难以阅读；正文与按钮标签也不必沿用展示性标题的极端参数。
还要区分字体的可变能力和语言覆盖。上面的 Noto Sans Arabic 案例不能直接证明同一字体会为全部中文字符提供相同轴效果；如果某些文字使用了回退字体，拖动参数时不同字符可能表现不一致。中英文、数字、标点和实际业务中的长标题都应放入同一组样例中检查。
从设计稿到网页，还需要验证哪些内容
在 Pixso 中为同一内容建立桌面、平板和手机画板，并保留调整前后的字体参数。建议记录字体名称与文件版本、使用的轴及数值、字号、行高、字距、换行和截断规则。交付的重点是让研发知道哪一项变化来自字体，哪一项来自布局，而不是只提供一张最终截图。
- 字体尚未加载：用回退字体查看标题是否挤压按钮、卡片高度是否变化；字体加载完成后不应遮挡关键操作。
- 长文本与混排：比较同一标题的中英文版本、连续数字和括号等标点，不只测试几字短标题。
- 实际下载成本：按页面真正使用的字重、字宽和字符集比较资源，不以“一个文件”直接推断体积更小。
- 授权与部署：确认所选字体允许相应的网页使用方式，并核对项目需要的字符是否包含在已部署的子集中。
注册轴及使用范围可参考 MDN 可变字体说明；字体的结构和使用取舍也可参阅 web.dev 可变字体介绍。设计稿中的参数验证与网页端的字体加载验证是两个环节，完成其中一个不能替代另一个。
总结
以上就是可变字体的全部介绍以及Pixso 可变字体的应用，随着技术的不断创新，可变字体可结合响应式排版设计，给予用户更加完美的用户体验，同时也为设计师提供了前所未有的创作自由度。
