可变字体生效需同时满足三条件：@font-face 中必须声明 format('woff2-variations')，font-variation-settings 语法严格（轴名单引号、数值不加引号、大小写敏感），且浏览器支持；任一缺失即静默退化为静态字体。
font-variation-settings 语法写错就完全失效
浏览器对 font-variation-settings 极其敏感，一个引号或大小写错误，整条声明就被静默丢弃——页面看起来“没变化”，实际根本没生效。
-
'wght'400 ✅ 单引号包裹轴名，数值不加引号 -
"wght"400 ❌ 双引号 → 忽略整行 -
'wght'"400" ❌ 数值加引号 → 当字符串处理，无法插值、动画卡顿 -
wght400 ❌ 轴名不加引号 → 大小写严格，wght≠WGT
推荐统一用整数（如 'wght' 537）或保留一位小数（如 'wdth' 95.0），避免混用。
@font-face 漏写 format('woff2-variations') 就退化为静态字体
即使 font-variation-settings 写得完全正确，只要 @font-face 的 src 里没明确声明 format('woff2-variations')，浏览器就当它是普通 WOFF2，所有轴控制全部失效，且不报错、不警告。
-
format('woff2')或format('woff2 supports variations')都不行，必须严格写成format('woff2-variations') - Google Fonts 默认链接是
woff2，需手动把 URL 中的woff2替换为woff2-variations - Firefox（尤其 115 之前）最敏感；Chrome/Edge 会静默降级，但
font-weight: 537这类连续值仍 fallback 到最近离散值（如 400 或 700）
font-weight 和 font-variation-settings 同时存在时后者永远胜出
很多人误以为两者并存，实际是覆盖关系：font-variation-settings 一旦出现，font-weight 就被无视。想兼顾语义和精确控制，得靠 @supports 分离逻辑。
-
@supports (font-variation-settings: normal)块内只写font-variation-settings，不写font-weight - 不支持的环境里，才用
font-weight+ 静态字体 fallback - 混用会导致行为不可预测，比如
font-weight: 600被设了却毫无效果
slnt 轴不能靠 font-style: oblique 触发
font-style: oblique 对可变字体完全无效——它只是 CSS 渲染层的倾斜模拟，跟字体内部的 slnt 轴毫无关系。真正左倾或右倾，必须直写 font-variation-settings: 'slnt' -8。
-
slnt值范围通常为 -10 到 10，负值向左倾，正值向右倾 - 具体上限得查字体文档或用
fonttools ttfdump看fvar表 - 别和
ital轴混淆：有些字体（如 IBM Plex Sans Variable）用ital控制真正的斜体字形，slnt是纯几何倾斜
最常被忽略的是：可变字体的渲染一致性不取决于「是否写了属性」，而取决于「是否同时满足格式声明 + 语法正确 + 浏览器解析路径未中断」——三者缺一，就退化成静态字体，且几乎不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
