字体拉伸属性
最后更新：2026-09-13
font-stretch 字体拉伸属性
font-stretch 用于选择字体的紧缩或拉伸变体，从 ultra-condensed 到 ultra-expanded 共九档。需要字体本身包含对应宽度的变体才能生效。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 是 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | 关键字 | 字体拉伸程度 |
<percentage> | 类型 | 拉伸百分比 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-stretch | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| 所有主流浏览器均支持 | |||||
注意： 绝大多数中文字体不含宽度变体，该属性对中文基本无效，主要用于含可变字体的西文排版。
❓ 常见问题
Qfont-stretch 和 letter-spacing 有什么不同？
Afont-stretch 改变字形本身的宽度比例（condensed/expanded），需要字体提供对应宽度变体或可变字体；letter-spacing 只是增加字符间距，字形不变。想让文字显窄用前者，想加呼吸感用后者。
Qfont-stretch 对中文有效吗？
A基本无效。绝大多数中文字体只含一套常规宽度字形，没有 condensed/expanded 变体，浏览器会忽略该属性。它主要用于西文字体排版和可变字体场景。
Q怎么让文字看起来更窄？
A若字体提供宽度变体，用 font-stretch: condensed；也可配合 transform: scaleX(0.9) 压缩，但文字会变形。可变字体可精确指定宽度百分比，如 font-stretch: 75%。
🏷️ 相关属性
💡 相关案例
📚 相关教程
