可变字体
Variable Font
一个字体文件里带着连续的字重轴，可以停在任意粗细。
- 又叫：
- 可变字重
- 轴字体
- 可变字体动画
- variable font
- font-variation-settings
- weight axis
- 展厅
- 排版与文字
- 形态
- 固定舞台
- 播放
- 常驻循环
- 关键词
- 纯 CSS / 字体特性 / 可以直接用
参数工作台
复制给 AI
随参数实时更新用可变字体（variable font）做一个字重可调的文字块，字体是 Space Grotesk，轴范围大约 300–700。font-variation-settings 写成 "wght" 450，字重取连续值，任意数字都要真正插值，不是就近跳到某一档。旁边放一行 300–700 的对照尺。给不支持可变字体的浏览器留一个接近的静态字重兜底。
variable font, font-variation-settings: "wght" 450, continuous weight interpolation, wght axis, @font-face font-weight range, font-display: swap fallback, weight ruler 300-700, respect prefers-reduced-motion
https://publieople.github.io/design-museum/entry/variable-font/?stage=light
链接带着你调好的参数
什么时候用
- 标题需要在细和粗之间平滑过渡，而不是只有 400 和 700 两档
- 想用同一套字体兼顾正文和超粗标题，少加载几个字体文件
- 随交互或滚动慢慢改变字重，做一个不靠颜色和位移的强调
适用场景：文字 / 页面
推荐取值
- 字重范围
- 300–800（以字体实际轴范围为准）
- 常见轴
- wght / wdth / opsz / slnt
- 插值时长
- 400–900ms
- 缓动
- ease-in-out
别搞混
和「多字重静态字体」的区别
静态字体每一档是一个独立文件，只加载了 400 和 700 时，font-weight: 550 会被四舍五入到其中一档；可变字体在轴范围内任意数值都能真正插值。
和「font-weight 和 font-variation-settings」的区别
两个都能调字重。font-weight 是标准属性，会正常继承，也能让不支持可变字体的 fallback 生效；font-variation-settings 是底层开关，用来访问 wdth、slnt 这些没有专门属性的轴，写 wght 时会盖过 font-weight，MDN 建议 wght 优先走 font-weight。
容易踩的坑
- 字体里没有的轴，调了完全没反应。先用字体工具查清它有哪些轴、范围多少，超出范围的值会被夹到边界。
- font-variation-settings 的值是字符串，轴名必须带引号：font-variation-settings: "wght" 550, "wdth" 90。少写引号整条声明失效。
- 改轴值会触发文字重新排版，不是 GPU 合成的，长时间无限循环容易掉帧，而且要尊重 prefers-reduced-motion。
- Web 字体还没下载完时会先落到系统字体，轴不生效还会跳一下；用 font-display: swap，并让 fallback 的字重尽量接近。
无障碍降级
可变字体本身是静态能力。如果用它做来回脉动的字重动画，prefers-reduced-motion 下应停在最终字重，不做插值。
关键词
- font-variation-settings
- variable font
- wght
- wdth
- opsz
- slnt
- @font-face
- font-weight