必须先确保字体文件、加载方式、检测逻辑三者全部对齐，否则 font-variation-settings 会静默失效；常见原因包括 src 缺 format('woff2-variations')、字体不含目标轴、font-family 不匹配或未在 @font-face 中声明轴范围。
直接用 font-variation-settings 调节变量字体，必须先确保字体文件、加载方式、检测逻辑三者全部对齐；否则看起来写了，实际无效——尤其在 Firefox 和旧版 Safari 上，静默失效是常态。
为什么 font-variation-settings 写了却没反应
最常见原因不是语法错，而是底层支撑断了：
-
@font-face的src里没写format('woff2-variations')，只写了format('woff2')—— Firefox 会降级解析，wght值变成“摆设”，连font-weight: 537都不认 - 字体文件本身不含目标轴（比如用了只带
wght的变体，却去设'wdth' 120） - 父元素没声明
font-family，或声明的字体名和@font-face中的font-family不一致（注意大小写、空格、引号） - 写了
font-variation-settings: 'wght' 600，但同时又写了font-weight: bold——后者会被前者覆盖，而bold语义也丢失了
如何正确声明可变字体 + 轴范围
不能只靠 font-variation-settings 单打独斗，@font-face 必须提前“报备”能力：
/* 正确：明确声明支持 wght 范围，并指定 variations 格式 */
@font-face {
font-family: "InterVar";
src: url("inter-var-latin.woff2") format("woff2-variations");
font-weight: 100 900; /* 关键：告诉浏览器这个字体能跑多宽的 wght */
font-stretch: 75% 125%; /* 如果支持 wdth，也得写 */
}
-
font-weight: 100 900不是“默认值”，而是“能力声明”——没有它，浏览器可能拒绝响应'wght' 537 - 多个轴要一起声明：
font-weight+font-stretch+font-style（如果含ital或slnt） - Google Fonts 的变量字体链接需手动把
woff2替成woff2-variations，否则白搭
怎么安全地检测并 fallback
@supports (font-variation-settings: normal) 只是语法支持，不代表轴可用。更稳妥的做法是：
@supports (font-variation-settings: normal) and (font-weight: 123) {
.text {
font-family: "InterVar", sans-serif;
font-variation-settings: "wght" 537, "wdth" 95;
}
}
@supports not ((font-variation-settings: normal) and (font-weight: 123)) {
.text {
font-family: "Inter", sans-serif;
font-weight: 500;
}
}
- 加
font-weight: 123是为了筛掉那些只认离散值（400/700）的老浏览器 - fallback 字体必须用独立的
@font-face块加载，且font-weight/font-style要和主字体作用域区分开，避免冲突 - 别用
@supports (font-variation-settings)——缺参数值，整条规则被忽略
哪些地方绝对不能用 font-variation-settings
它不是 font-weight 的替代品，而是微调工具：
- 不要用
font-variation-settings: "wght" 700代替font-weight: bold——可访问性工具读不到加粗语义 - 不要在全局
body上设font-variation-settings，它不继承，子元素全得重写 - 避免用它控制交互态变化（比如 hover 变
wght），除非你已测过动画帧率——部分浏览器重绘开销高 - 自定义轴名（如
"GRAD"）必须全大写、严格四字母，错一个字符就静默失败
真正麻烦的从来不是怎么写，而是怎么让不同浏览器在不同加载阶段都“信得过”那个值——轴声明、格式标识、检测条件，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
