@font-face中font-weight写成“100 900”表示该可变字体原生支持从100到900的连续字重区间，需配合format('woff2-variations')及font-display等声明共同生效，缺一不可。
@font-face 中的 font-weight 不是“range”语法，而是范围声明——即用两个数值（如 300 700）表示该字体文件原生支持的字重区间。浏览器靠它预判能否响应 font-weight: 537 这类连续值，而不是仅 fallback 到离散档位。
@font-face 里 font-weight 写成 300 700 是什么意思
- 它告诉浏览器：“这个字体文件不是只带 400 和 700 两个粗细，而是能平滑支撑从 300 到 700 的任意值”
- 浏览器据此决定是否启用轴控制逻辑；若写成单值（如
font-weight: 400），即使字体本身是可变的，Chrome/Firefox 也会当作普通静态字体处理 - 必须配合
format('woff2-variations')，否则该范围声明会被忽略（尤其 Firefox）
可变字体必须配对的三项声明缺一不可
-
src中明确使用format('woff2-variations')（不能只写format('woff2')） -
font-weight写成区间形式，例如font-weight: 100 900 -
font-style若含斜体轴（ital），也需写成区间，如font-style: normal oblique或font-style: 0 1（部分字体用数值轴）
漏掉任意一项，font-weight: 632 就可能静默退化为 600 或直接回退到系统字体。
为什么不能只靠 font-variation-settings: 'wght' 632 微调
-
font-variation-settings是“覆盖层”，不是主控逻辑 - 如果
@font-face没声明font-weight: 100 900，浏览器根本不会把该字体识别为“支持连续字重”，后续所有wght轴操作都失去语义基础 - 更实际的问题：无障碍工具（如屏幕阅读器）只认
font-weight数值，不读font-variation-settings—— 用后者替代前者会导致加粗语义丢失
实际项目中容易被忽略的兼容性细节
- Google Fonts 提供的变量字体 URL 默认是
woff2，要手动替换成woff2-variations - Safari 16.4+ 才开始稳定支持
font-weight区间声明，旧版 Safari 会忽略它并按第一个值（如100）加载字体 - 如果同时提供静态 fallback 字体（比如
Roboto-Regular.woff2），必须用独立的@font-face块，并显式设font-weight: 400，避免和可变版本冲突
真正起效的最小可用块长这样：
@font-face {
font-family: 'InterVar';
src: url('Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}
没这三行，font-weight: 537 就只是个看起来像在工作的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
