可变字体生效需三步协同：正确加载（format('woff2 supports variations')）、声明轴范围（如font-weight: 100 900）、运行时用font-variation-settings精确控制轴值，缺一即退化为静态字体。
可变字体不是“换一个字体”那么简单，它需要三步协同生效：正确加载、声明支持范围、运行时轴控制。漏掉任一环，字体就退化成静态文件，font-variation-settings 会静默失效。
为什么写了 font-variation-settings: "wght" 600 却没变化？
最常见原因是 @font-face 声明不完整。浏览器只认“可变字体”，当且仅当：
-
@font-face中的src后缀明确写为format('woff2 supports variations')（不能只写format('woff2')） -
font-weight必须写成范围，如font-weight: 100 900；单值写法（如font-weight: 400）会让浏览器当作普通字体处理 - 若字体含
wdth（字宽）轴，还需补充font-stretch: 75% 125%；slnt轴无法在 @font-face 中声明范围，只能靠后续 CSS 驱动
font-variation-settings 的写法与限制
这是唯一能实时驱动可变轴的 CSS 属性，但细节极易出错：
- 轴标签必须用英文双引号包裹，且大小写严格匹配字体定义（如
"wght"不是"WGT"或wght） - 数值不带单位（
"wght" 523✅，"wght" 523px❌） - 不继承，必须显式写在目标文本元素上（比如
p、h1、span），父级设置无效 - 可组合多个轴：
font-variation-settings: "wght" 700, "wdth" 85, "ital" 1
怎么确认字体真的支持某个轴？
别信文档，直接验文件。打开字体（.ttf/.woff2）用 fonttools ttfdump font.ttf | grep -A 10 fvar，或上传到 Wakamai Fondue。关键看输出里有没有 slnt、ital、wdth 这类轴名。很多标称“Variable”的字体其实只实现了 wght 和 wdth，slnt 轴压根没做——这时你设 "slnt" -10 就是白忙。
Safari 16.4 之前版本怎么办？
旧版 Safari 完全忽略 font-variation-settings，整条声明被丢弃。必须提供降级方案：
- 用
@supports (font-variation-settings: normal)包裹可变字体规则 - 在不支持的环境下，用传统
font-family指向一组静态字体（如MyFont-Thin、MyFont-Bold） - 避免只依赖可变字体做核心排版，否则文字可能渲染为系统默认字体且无倾斜/字重变化
真正卡住人的从来不是语法，而是字体文件本身是否真包含你要的那个轴，以及 @font-face 是否让浏览器“认出”它是可变的——这两点不验证清楚，后面所有 CSS 都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
