写过 CSS 的人都以为 font-stretch 只是个属性名，今天它被 CSS Fonts Level 4 正式改名了

配了这么多年 CSS，你大概已经习惯了 font-stretch: condensed 这种写法。但从 Firefox 155 开始，这个属性的正式名字变了——font-width 才是 CSS Fonts Module Level 4 里的标准名称，font-stretch 只是浏览器为了兼容老代码留的别名。

为什么要改名

font-stretch 从 CSS Fonts Level 3 就存在，但它的命名一直有点尴尬——stretch 描述的是字体的「拉伸程度」，而不是字体的「宽度」属性本身。CSS Fonts Module Level 4 重新审视了这个语义，把属性名改成了更直观的 font-width。这和 font-weight、font-style 的命名逻辑一致了：font-{轴名} 的格式，一眼看懂。

关键词到数值的映射没变

改名不意味着功能变化。font-width 接受的值和 font-stretch 完全相同：

• 关键词值：ultra-condensed / extra-condensed / condensed / semi-condensed / normal / semi-expanded / expanded / extra-expanded / ultra-expanded
• 百分比值：50% ~ 200%，负数无效

关键词和百分比的对应关系也不变：

浏览器现状

Firefox 155（2026 年 9 月）是第一个支持 font-width 的浏览器，font-stretch 作为历史别名仍然全浏览器兼容。Chrome/Safari/Edge 目前只支持 font-stretch，还不认 font-width。所以现在迁移代码可以开始规划，但不必急着全量替换。

怎么迁

新代码直接用 font-width：

/* 推荐写法 */
.text-narrow {
  font-width: condensed;
}
.text-wide {
  font-width: 125%;
}

PostCSS 自动兼容：

如果你想平滑过渡，可以用 postcss-preset-env，它内置了 postcss-font-width-property 插件，会自动把 font-width 降级成 font-stretch 输出：

// postcss.config.js
module.exports = {
  plugins: [
    postcss-preset-env // 包含 font-width → font-stretch 降级
  ]
};

这样你写的是新标准，浏览器跑的是老兼容代码，两不耽误。

@font-face 里的 font-stretch 描述符也改了：

@font-face {
  font-family: "League Mono";
  src: url("LeagueMono-VF.woff2") format("woff2");
  font-width: 75% 150%; /* 标准写法，Firefox 155 */
  /* font-stretch: 75% 150%; ← 老写法，Firefox 155 前有效 */
}

@font-face 的 font-stretch 描述符同样改名为 font-width，映射关系完全一致。

迁移节奏建议

• 立即可用：新项目、新组件直接写 font-width，反正 font-stretch 当别名还能跑
• 不急替换：老代码里的 font-stretch 不用改，浏览器兼容没问题
• 工具链配合：用 PostCSS preset 让新属性自动降级，避免生产环境报错

下一步

如果你项目里搜到了 font-stretch，可以把这次改名当成一次 CSS 规范演进的观察窗口。属性改名这事儿不常发生——上一次类似的是 CSS 变量从自定义属性到标准语法的过程。知道它为什么改、改了啥，比盲目跟升级级更重要。

查一下 caniuse.com，看看 font-width 什么时候全浏览器支持，到时候统一迁移也不迟。