font-stretch

已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。

font-stretch CSS 描述符允许作者为 @font-face 规则中指定的字体指定正常、凝缩或扩展的字形。

对于特定的字体家族，作者可以下载对应同一字体家族不同风格的各种字形，然后使用 font-stretch 描述符显式指定字形的拉伸。CSS 描述符的值与对应的字体属性值相同。

语法

css

/* Single values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

font-stretch 属性使用下列任一值进行描述。

值

normal: 指定正常字形。
semi-condensed, condensed, extra-condensed, ultra-condensed: 指定比正常更凝缩的字形，其中 ultra-condensed 是最凝缩的。
semi-expanded, expanded, extra-expanded, ultra-expanded: 指定比正常更扩展的字形，其中 ultra-expanded 是最扩展的。
<percentage>: 一个介于 50% 到 200%（含）之间的 <percentage> 值。此属性不允许使用负值。

在 font-stretch 规范的早期版本中，该属性只接受九个关键字值。CSS Fonts Level 4 将语法扩展为也接受 <percentage> 值。这使得可变字体能够提供更接近字符宽度连续体的效果。对于 TrueType 或 OpenType 可变字体，“wdth”变体用于实现不同的宽度。

如果字体没有提供与给定值完全匹配的字形，那么小于 100% 的值映射到较窄的字形，大于或等于 100% 的值映射到较宽的字形。

关键字到数字的映射

下表显示了关键字值和数字百分比之间的映射

关键字	百分比
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

相关的 at-rule	`@font-face`
初始值	`normal`
计算值	同指定值

正式语法

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

示例

设置 font-stretch 的百分比范围

以下代码查找本地的 Open Sans 字体或导入它，并允许将该字体用于正常、半凝缩和半扩展状态。

css

@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}