font-variation-settings 是控制可变字体轴值的底层属性，支持任意浮点值；而 font-weight 是语义化别名，仅映射预定义字重且会四舍五入。
什么是 font-variation-settings，它和 font-weight 有什么区别？
font-variation-settings 是 CSS 中控制可变字体（Variable Fonts）轴值的底层方式，相当于直接“拧动”字体内部的滑块。而 font-weight、font-stretch、font-style 这些是语义化别名——它们只映射到字体中预定义的轴（比如 wght 或 wdth），且浏览器会做标准化处理（例如把 font-weight: 650 四舍五入到最近的已注册字重）。
-
font-variation-settings允许你输入任意浮点值，只要字体支持该轴（如"wght" 627.3） - 它不触发浏览器的字重查找逻辑，也不会 fallback 到其他字体
- 必须用引号包裹轴名（
"wght"），值不能带单位 - 多个轴用逗号分隔：
font-variation-settings: "wght" 780, "wdth" 92;
怎么查一个字体支持哪些可变轴？
最可靠的方法是用浏览器开发者工具：加载字体后，在 Elements 面板选中文字元素 → Styles 标签页 → 展开字体相关声明 → 找到 font-variation-settings 行，鼠标悬停会出现提示：“This font supports axes: wght, wdth, ital”。但前提是字体已成功加载且被识别为可变字体。
- 也可以用命令行工具
fonttools：fonttools varLib.instancer --list font.ttf - 或打开字体文件用 Font Book（macOS）或 FontForge 查看“Variations”面板
- 常见轴名：
"wght"（字重）、"wdth"（字宽）、"ital"（意大利斜体开关，通常是 0 或 1）、"opsz"（光学尺寸）
为什么设置了 font-variation-settings 却没变化？
常见原因不是写法错，而是字体本身没真正启用可变特性：
- 字体文件不是可变字体（.ttf/.woff2 文件需含
fvar表），用file font.woff2检查输出里是否有 “variable font” - 字体未通过
@font-face正确声明，漏了font-weight和font-stretch的范围（必须设成区间，如font-weight: 100 900;），否则 Chrome/Firefox 会拒绝将其识别为可变字体 - 使用了
font-weight等简写属性，覆盖了font-variation-settings（CSS 优先级相同，后者会被前者压制） - 轴名大小写错误（必须小写，如
"wght"，不是"WGT"或"weight"） - 值超出字体支持范围（可用
fonttools查具体 min/max）
在响应式场景下动态调整可变轴，用 JS 还是纯 CSS？
优先用 CSS：配合 @media 或 prefers-reduced-motion 等媒体查询直接切换 font-variation-settings，性能好、无闪屏、支持服务端渲染。
-
示例：小屏收窄字宽提升可读性
@media (max-width: 480px) { body { font-variation-settings: "wght" 550, "wdth" 85; } } -
若需根据滚动位置、视口比例等实时调节，才用 JS，但务必节流（
requestAnimationFrame），避免频繁重排：function updateFont() { const progress = window.scrollY / document.body.scrollHeight; element.style.fontVariationSettings = `"wght" ${400 + progress * 300}`; } window.addEventListener('scroll', updateFont);
可变字体真正的复杂点不在语法，而在于字体文件是否真的包含你想要的轴、轴的数值范围是否符合设计预期，以及不同浏览器对同一轴名的解析兼容性（比如 Safari 对 "opsz" 的行为就和 Chrome 有细微差异）。上线前最好用真实设备多测几款主流可变字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
