font-stretch 不是缩放，仅匹配字体中预定义的字宽变体；若字体未内置对应变体（如多数免费字体），设置无效，须通过 @font-face 显式注册各档位或改用可变字体。
font-stretch 不是缩放，它只作用于有对应字宽变体的字体
很多人以为 font-stretch 能像 transform: scaleX() 那样任意拉伸文字，实际不是。它只是告诉浏览器：“请从当前字体中选择一个预定义的字宽版本”，比如 ultra-condensed 或 expanded。如果字体文件本身没打包这些变体（绝大多数免费字体、系统默认字体都没有），设置就完全无效。
- 查字体是否支持：用浏览器开发者工具选中文字 → Elements → Computed → 查看
font-stretch是否生效，同时观察font-family实际加载的是哪个文件（常会回退到常规宽度） - Google Fonts 上部分字体明确标注了 “Variable” 或列出
font-stretch支持范围（如IBM Plex Sans支持 50–100），但需手动加&display=swap并在 CSS 中显式声明 - Webfont 加载时，
font-stretch值可能被忽略，直到字体完整加载；可配合@font-face的font-stretch描述符提前声明
用 @font-face 显式声明 font-stretch 才能真正启用字宽变体
即使字体支持多字宽，不通过 @font-face 注册具体变体，CSS 中直接写 font-stretch: condensed 也大概率无效。必须把每个字宽档位当作独立字体资源注册。
- 示例：若使用
Inter可变字体，它原生支持字宽轴（wght,wdth），应优先用font-variation-settings: 'wdth' 75，而非font-stretch - 对传统静态字体（如
Source Sans Pro），需分别注册：@font-face { font-family: 'SourceSans'; font-stretch: ultra-condensed; src: url('source-sans-ultra-condensed.woff2'); } -
font-stretch在@font-face中是匹配条件，不是运行时切换指令；浏览器按font-stretch值匹配已注册的@font-face规则，再加载对应资源
font-stretch 的取值和兼容性陷阱
font-stretch 有 9 个关键字值（ultra-condensed 到 ultra-expanded）和百分比值（50%–200%），但行为差异很大：
- 关键字值在 Chrome/Firefox/Edge（新版）中基本可用，Safari 16+ 开始支持，但 Safari 15 及更早版本完全忽略
- 百分比值（如
font-stretch: 85%）仅在支持可变字体的环境下才有效，且依赖字体是否开放wdth轴；否则会被当作文本忽略 - 数值写法容易误以为是“缩放比例”，但它不是 CSS transform，不会影响布局盒尺寸或触发重排，只改变字形渲染宽度
- 设置
font-stretch: 125%后，若字体无对应变体，浏览器不会插值计算，而是降级为normal（即 100%）
替代方案：什么时候该放弃 font-stretch 改用其他手段
当目标字体不支持字宽变体，或需要精确控制、跨浏览器一致时，font-stretch 就不该是首选。
立即学习“前端免费学习笔记（深入）”；
- 纯视觉压缩：用
transform: scaleX(0.9)+transform-origin: left center，但注意它会压缩所有内容（包括空格、标点），且影响点击热区 - 等宽场景下微调：用
letter-spacing配合负值（如letter-spacing: -0.02em），对英文效果明显，中文慎用（易导致字间距失衡） - 真正可控的方案：改用可变字体（如
Inter,Roboto Flex），配合font-variation-settings: 'wdth' 75，支持平滑过渡和响应式调节 - 服务端生成字体子集时，可定制字宽变体并注入 CSS，但成本高，适合品牌字体长期项目
真正麻烦的不是怎么写那行 CSS，而是得先确认字体文件里有没有那个“字宽档位”。没这个前提，所有 font-stretch 设置都只是安静地失效。
