font-variation-settings 不能直接写死在元素上，因其不保证重排重绘、不继承、依赖字体加载与浏览器支持，且易导致语义丢失和维护困难；须配合 @font-face 范围声明、@supports 检测及 fallback 策略。
font-variation-settings 为什么不能直接写死在元素上
因为浏览器对 font-variation-settings 的支持程度不一，且它本身不触发字体重排或重绘的语义保证。如果只靠元素级声明，一旦字体未加载完成、或浏览器不支持该属性，文本会回退到默认字体且样式失控，连基础 font-weight 都可能失效。
更关键的是：该属性值不会被继承链自动传播——父元素设了 'wght' 600，子元素仍需显式声明，否则按默认 400 渲染。这导致维护成本陡增，尤其在组件化项目中。
- 必须配合
@font-face中的font-weight/font-stretch范围声明，让浏览器提前知道“这个字体能干啥” -
font-variation-settings应仅用于微调（比如同一段内不同词需要不同字重），而非主控逻辑 - 避免用它替代标准属性：例如用
'wght' 700而非font-weight: bold，会导致可访问性工具无法识别语义加粗
@font-face 声明里漏掉 format('woff2-variations') 会怎样
Chrome 和 Edge 会照常加载并渲染，但 Firefox（尤其旧版）可能静默降级为普通 WOFF2 解析，丢失轴控制能力——font-variation-settings 无效，font-weight 也只认离散值（如 400/700），无法响应连续范围（如 537）。
这不是报错，而是“看起来正常、实则失效”的典型兼容性陷阱。
- 务必在
src中使用format('woff2-variations')，而不是笼统的format('woff2') - 若同时提供传统字体 fallback，需用独立的
@font-face块，并通过font-weight和font-style明确区分作用域 - Google Fonts 提供的变量字体链接默认不含
-variations标识，需手动替换 URL 中的woff2为woff2-variations
@supports 怎么检测 font-variation-settings 而不是只看 woff2 支持
只检测 @supports (font-variation-settings: normal) 不够——它返回 true 并不代表轴名（如 'wght'）可用，也不代表当前字体文件实际包含该轴。Firefox 曾长期支持该属性语法但不支持 wght 连续插值。
真正可靠的检测是组合判断：
- 先用
@supports (font-variation-settings: normal) and (font-weight: 123)筛出能解析非整数字重的浏览器 - 再用 JavaScript 检查
document.fonts.check('123px "MyVarFont"', 'A')+ 实际渲染测试（比如创建隐藏 canvas 测量宽度变化） - CSS 层面可写：
@supports (font-variation-settings: normal) { .text { font-variation-settings: 'wght' 600; } }，但必须配 fallback 规则在外部
JetBrains Mono 或 Source Han Serif 这类开源变量字体的常见轴命名陷阱
它们大多遵循 OpenType 标准轴（'wght', 'wdth', 'ital'），但 Source Han Serif 的斜体轴实际叫 'ital' 而非 'slnt'，强行写 'slnt' 10 在 Chrome 下静默失败；JetBrains Mono 的 italic 轴是二值开关（0 或 1），不是角度值，写 'ital' 10 会无效。
自定义轴名（如 Decovar 的 'TRMC'）大小写敏感，且必须与字体文件内嵌元数据完全一致——差一个字母就无反应，也不报错。
- 用
fonttools ttfdump或在线工具（如 Wakamai Fondue）查看字体真实支持的轴列表 - 避免在 CSS 中硬编码轴名，改用 CSS 自定义属性中转：
--font-wght: 600;→font-variation-settings: 'wght' var(--font-wght); - Firefox 对自定义轴名的支持比 Chrome 更严格，部分版本要求引号内全大写（
'MYAX'），小写（'myax'）会被忽略
@font-face 声明再规范，如果下载的是精简版 .woff2（比如只保留 wght 轴而砍掉 wdth），font-variation-settings: 'wdth' 100 就永远没效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
