font-stretch不是任意缩放字体的工具，仅对支持宽度轴的可变字体（如inter variable、roboto flex）或预置多宽度变体的字体生效；传统字体（如arial、微软雅黑）因无对应字宽数据，设置无效。
font-stretch 不是“让任意字体变宽变窄”的万能开关，它只对支持可变字体（Variable Fonts）或提供了多个宽度轴（width axis）的字体生效；普通字体设了也无效。
font-stretch 值写对了但没反应？先确认字体是否支持
浏览器不会报错，但 font-stretch: ultra-expanded 对 Arial、Helvetica、"Microsoft YaHei" 这类传统字体完全不起作用——它们压根没有宽度轴数据。只有像 Inter Variable、Roboto Flex、IBM Plex Sans Variable 这类明确标注 “Variable” 的字体才真正响应该属性。
- 检查方式：在 DevTools 的 Elements 面板里选中元素 → Styles 标签页 → 展开 font-family 声明，看是否出现 “
font-stretchapplied” 或类似提示（Chrome 120+ 支持） - 快速验证：用 Google Fonts 搜索带 “Variable” 后缀的字体，例如
https://fonts.google.com/specimen/Inter?query=inter+variable，复制其@import链接并确保加载成功 - 本地字体需显式声明
font-weight和font-stretch范围，例如：@font-face { font-family: 'MyVar'; src: url('myvar.woff2') format('woff2-variations'); font-stretch: 50% 200%; }
font-stretch 的值不是线性缩放，而是关键字映射
你写 font-stretch: 150% 是无效的——CSS 规范不支持数值百分比写法。必须用预定义关键字，且这些关键字会映射到字体文件内实际存在的宽度档位（如 normal → width 100，condensed → width 75，expanded → width 125），中间档位若缺失，浏览器会取最接近的可用档位，而非插值计算。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 有效值仅限：
ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded -
wider和narrower是相对父级的增量指令，但依赖父级本身已设了非-normal值才有意义；单独用基本等于normal - 别指望
font-stretch: condensed让思源黑体变窄——它只对Source Han Sans VF这类可变版本起效
替代方案：当 font-stretch 失效时怎么控制文字宽度
如果字体不支持，又确实需要视觉上“压扁”或“拉宽”文字，只能退而求其次用近似手段，但要注意副作用：
-
letter-spacing：调负值（如-0.05em）可让字间距收紧，视觉上略显紧凑，但无法改变单个字形宽度；正值会让文字稀疏，慎用于中文 -
transform: scaleX(0.95)：直接缩放 X 轴，简单粗暴，但会挤压所有内容（包括下划线、border），且影响点击热区和可访问性（AT 工具可能读错字形） - CSS 自定义属性 + @property（实验性）：仅 Chromium 系列支持，可用于动画
font-stretch，但前提是字体本身支持 - 服务端生成 SVG 文字：极端场景下，把文字转成 SVG path 并手动缩放，完全可控但失去文本语义和 SEO
JavaScript 动态改 font-stretch 容易踩的坑
用 element.style.fontStretch = 'expanded' 看似简单，但有三个隐蔽问题：
- 设置后不会触发重排（reflow），但某些旧版 Safari 下需强制
getComputedStyle(element).fontStretch才能触发渲染更新 - 若字体尚未加载完成，设置会被忽略，建议监听
document.fonts.load()再操作 - 不能直接设
element.style.fontStretch = '150%'—— 会静默失败，必须用关键字
真正决定文字宽度的，从来不是 CSS 属性本身，而是字体文件是否携带宽度轴数据。别在不支持的字体上反复调试 font-stretch，先确认字体来源和格式，这步跳过，后面全白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
