CSS font-stretch 语法
在 CSS 中，font-stretch 属性用于选择字体的压缩或扩展版本（如果字体包含这些变体），以便使得文本更宽或更窄。
语法：
font-stretch: 关键词或百分比;说明：
font-stretch 的取值有 2 种。
- 关键字：比如 normal、ultra-condensed、extra-condensed 等。
- 百分比：比如 50%、100%、200% 等。
font-stretch 取值的映射关系如下表所示。
| 关键词 | 百分比 |
|---|---|
| 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% |
注意: 并非所有字体使用 font-stretch 都会生效，只有提供了压缩或扩展版本的字体才会生效。如果你发现 font-stretch 无法生效，那是因为该字体并不提供压缩或扩展版本。
CSS font-stretch 摘要
| 属于 | CSS 字体属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | normal |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS font-stretch 示例
接下来，我们通过几个简单的例子来讲解一下 CSS font-stretch 属性是如何使用的。
示例 1：font-stretch 无效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p { font-family: Verdana; }
p:nth-child(1) { font-stretch: 50%; }
p:nth-child(2) { font-stretch: 100%; }
p:nth-child(3) { font-stretch: 200%; }
</style>
</head>
<body>
<p>www.lvyenet.com</p>
<p>www.lvyenet.com</p>
<p>www.lvyenet.com</p>
</body>
</html>页面效果如下图所示。
分析：
这里的 font-stretch 属性并没有生效，这是因为所选的 Verdana 字体并没有提供压缩或扩展的版本。大多数常用字体使用 font-stretch 属性都是无效的，只有指定特殊字体才会有效，请看下面例子。
示例 2：font-stretch 用于指定字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@font-face {
font-family: "Inconsolata";
src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
format("woff2");
font-stretch: 50% 200%;
}
p { font-family: Inconsolata; }
p:nth-child(1) { font-stretch: 50%; }
p:nth-child(2) { font-stretch: 100%; }
p:nth-child(3) { font-stretch: 150%; }
</style>
</head>
<body>
<p>www.lvyenet.com</p>
<p>www.lvyenet.com</p>
<p>www.lvyenet.com</p>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用了 @font-face 定义了一种名为 “Inconsolata” 的字体。Inconsolata 是一种可变字体，提供从 50% 到 200% 的连续宽度范围。
提示: font-stretch 是使用字体自带的字形，保持了文字的优美比例。如果想要强制拉伸任何字体（哪怕它不支持 font-stretch），我们可以使用 transform: scaleX(0.8)。但这种方式会使得文字变形失真，因此并不推荐用于大段文字。
