CSS 描述符font-stretch 允许作者在 @font-face at 规则中为指定的字体提供正常、压缩或扩展的字体。
描述符 font-stretch 专门用于指定字体 face'e stretch。这些字体对应于同一字体系列的不同样式。
描述符 font-stretch 的值与其对应的 font-stretch 属性的值相同。
不应将描述符 font-stretch 与 font-stretch 属性混淆。font-stretch 描述符仅与 @font-face at 规则一起使用，以显式选择该规则的扩展或缩小字体。然后，在样式表中的其他位置使用 font-stretch 属性，将该字体宽度应用于元素。
可能的值
CSS 描述符 font-stretch 可以具有以下值之一：
- normal：指定普通字体。
- Semi-condensed、condensed、extra-condensed、ultra-condensed：指定比正常字体更压缩的字体，其中 ultra-condensed 是最压缩的形式。
- 半展开、展开、超展开、超展开：指定比正常情况更扩展的字体，其中超扩展是展开程度最高的形式。
- <percentage>：百分比值，可以是 50% 到 200%（含）。不允许使用负值。
语法
font-stretch = "normal" | <'font-stretch'>;
<font-stretch> 的声明方式如下：
/* single values */
font-stretch = "normal";
font-stretch = "semi-condensed";
font-stretch = "condensed";
font-stretch = "extra-condensed";
font-stretch = "ultra-condensed";
font-stretch = "semi-expanded";
font-stretch = "expanded";
font-stretch = "extra-expanded";
font-stretch = "ultra-expanded";
font-stretch = 75%;
font-stretch = 200%;
/* multiple values */
font-stretch = 50% 120%;
font-stretch = semi-condensed ultra-condensed;
关键字到数值映射
下表说明了关键字值及其对应的百分比值的映射：
| 关健词 | 百分比 |
|---|---|
| normal | 100% |
| semi-condensed | 87.5% |
| condensed | 75% |
| extra-condensed | 62.5% |
| ultra-condensed | 50% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
可变字体
许多字体都有特定的宽度，对应于其中一个键术语值。但是有些字体在很大程度上支持一系列细粒度的拉伸，这些被称为可变字体。它们使用户能够更好地控制他们选择的字体粗细。为了指定这些字体的拉伸，百分比值很有用。
TrueType 或 OpenType 变量字体的 wdth 变体在实现不同的字形宽度时很有用。
可访问性问题：过于紧凑的字体，尤其是在对比度颜色比率低的字体的情况下，对于有阅读障碍和其他认知疾病的人来说可能不是很清楚。
CSS font-stretch - 百分比值
以下示例演示了字体拉伸值的设置，使用 @font-face 规则内使用的百分比范围 50% 和 200%：
<html>
<head>
<style>
@font-face {
src: local("monospace");
font-family: "f1";
font-style: normal;
font-stretch: 50% 200%;
}
.container {
font: 2rem "f1", sans-serif;
}
.font-condensed {
font-stretch: 50%;
}
.font-normal {
font-stretch: 100%;
}
.font-ultra-expanded {
font-stretch: 200%;
}
.font-semi-condensed {
font-stretch: semi-condensed;
}
.font-extra-condensed {
font-stretch: extra-condensed;
}
.font-ultra-condensed {
font-stretch: ultra-condensed;
}
.font-semi-expanded {
font-stretch: semi-expanded;
}
.font-extra-expanded {
font-stretch: extra-expanded;
}
</style>
</head>
<body>
<div class="container">
<p class="font-condensed">ultra-condensed (50%)</p>
<p class="font-normal">normal (100%)</p>
<p class="font-expanded">ultra-expanded (200%)</p>
<p class="font-semi-condensed">semi-condensed</p>
<p class="font-ultra-condensed">ultra-condensed</p>
<p class="font-semi-expanded">semi-expanded</p>
<p class="font-extra-expanded">extra-expanded</p>
</div>
</body>
</html>
