font-stretch 对可变字体仅起间接映射作用：它不直接驱动 wdth 轴，而是在字体已通过 @font-face 声明 font-stretch 范围且含 wdth 轴时，将关键字（如 condensed）映射至对应轴值；否则无效。
font-stretch 本身不能“驱动”可变字体的宽度轴，它只是匹配预设档位；真要动态调 wdth 轴，必须用 font-variation-settings，且前提是字体文件和 @font-face 声明都正确支持。
font-stretch 对可变字体到底起什么作用？
它只在两种场景下有效：一是字体提供了离散的多宽度静态变体（如 Source Sans Pro Condensed + Expanded），此时 font-stretch 是匹配规则；二是字体是真正的可变字体（如 Inter Variable），且你已在 @font-face 中声明了 font-stretch: 50% 200%，这时 font-stretch: condensed 才会触发浏览器去查 wdth=75 的轴值——但它不等于“设置”，只是间接映射。
-
font-stretch: condensed不会让任意字体变窄，它只是向字体引擎发请求：“给我 wdth≈75 的字形” - 如果字体没打包 wdth=75 这一档，浏览器就取最接近的可用值（比如 72 或 78），不会插值
-
font-stretch: 85%这种写法仅在 Chrome/Firefox 新版中被当作 wdth 轴指令处理，Safari 目前忽略
为什么写了 font-stretch 却没变化？三个必查点
绝大多数失效不是 CSS 写错，而是底层链路断了：
- 确认字体文件是否真含
wdth轴：用fonttools ttfdump yourfont.woff2 | grep -A 5 fvar查输出里有没有wdth；或上传到 Wakamai Fondue 看轴列表 - 检查
@font-face是否用了正确的 format 声明：format('woff2 supports variations')—— 写成format('woff2')就退化为普通字体 - 确保
@font-face包含font-stretch: 50% 200%（或至少覆盖你要用的关键字范围），否则浏览器不认为它支持宽度轴
真正可控的宽度调节：用 font-variation-settings 驱动 wdth
这是目前唯一能精确、实时控制可变字体宽度轴的方式，但要注意语法和作用域限制：
- 轴标签必须小写加英文双引号：
"wdth"✅，wdth❌，"WDTH"❌ - 数值无单位：
"wdth" 80✅，"wdth" 80%❌，"wdth" 80px❌ - 不继承，必须写在目标元素上：
p { font-variation-settings: "wdth" 90; }，父级设了子元素不会自动继承 - 可组合其他轴：
font-variation-settings: "wght" 600, "wdth" 75, "ital" 0;
示例（配合 Inter Variable）：
body {
font-family: 'Inter Variable';
}
h1 {
font-variation-settings: "wdth" 65;
}
p {
font-variation-settings: "wdth" 110;
}
容易被忽略的兼容性与降级陷阱
别只盯着 Chrome 能跑通就上线。Safari 16.4 之前版本完全忽略 font-variation-settings，且不会报错——文字直接回退到 normal 宽度，毫无提示。
- 必须用
@supports (font-variation-settings: normal)包裹可变字体规则 - 降级方案不能只靠
font-family: fallback-font，得配一组静态字体（如 Inter-Condensed、Inter-Expanded），并用@font-face显式注册它们的font-stretch值 - WebFont 加载期间，
font-stretch可能被忽略，直到字体就绪；加&display=swap并监听font-display状态更稳妥
真正卡住人的从来不是怎么写 CSS，而是字体文件本身有没有那个轴、浏览器有没有认出它是可变的、以及降级时文字会不会突然“胖一圈”或“瘦一截”。这三个环节漏一个，font-stretch 和 font-variation-settings 都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
