上查看所有课程
CSS font-stretch 属性用于加宽或缩窄网页上的文本。例如，
body {
font-family: Arial, sans-serif;
}
p.normal {
font-stretch: normal;
}
p.condensed {
font-stretch: condensed;
}浏览器输出
在此，font-stretch: condensed 会缩窄字符的宽度。
css-font-stretch-syntax CSS 字体拉伸语法
font-stretch 属性具有以下语法，
font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded CSS font-stretch 的可能值显示在下表中
| 字体样式值 | 描述 |
|---|---|
normal |
字体样式的默认值，字体显示为正常宽度 |
semi-condensed |
字体比正常宽度稍微窄一些 |
condensed |
字体比 semi-condensed 窄 |
extra-condensed |
字体比 condensed 窄 |
ultra-condensed |
字体比 extra-condensed 窄 |
semi-expanded |
字体比正常宽度宽一些 |
expanded |
字体比 semi-expanded 宽 |
extra-expanded |
字体比 expanded 宽 |
ultra-expanded |
字体比 extra-expanded 宽 |
percentage |
介于 50% 和 200%（含）之间的值不允许负值。 |
font-stretch 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Using font-stretch</title>
</head>
<body>
<p class="ultra-condensed">Ultra-condensed text</p>
<p class="extra-condensed">Extra-condensed text</p>
<p class="condensed">Condensed text</p>
<p class="semi-condensed">Semi-condensed text</p>
<p class="normal">Normal text</p>
<p class="semi-expanded">Semi-expanded text</p>
<p class="expanded">Expanded text</p>
<p class="extra-expanded">Extra-expanded text</p>
<p class="ultra-expanded">Ultra-expanded text</p>
</body>
</html>body {
font-family: Arial, Helvetica, sans-serif;
}
/* sets font-stretch to Ultra-condensed*/
p.ultra-condensed {
font-stretch: ultra-condensed;
}
/* sets font-stretch to Extra-condensed*/
p.extra-condensed {
font-stretch: extra-condensed;
}
/* sets font-stretch to Condensed */
p.condensed {
font-stretch: condensed;
}
/* sets font-stretch to Semi-condensed */
p.semi-condensed {
font-stretch: semi-condensed;
}
/* sets font-stretch to Normal */
p.normal {
font-stretch: normal;
}
/* sets font-stretch to Semi-expanded */
p.semi-expanded {
font-stretch: semi-expanded;
}
/* sets font-stretch to Expanded */
p.expanded {
font-stretch: expanded;
}
/*sets font-stretch to Extra-expanded */
p.extra-expanded {
font-stretch: extra-expanded;
}
/* sets font-stretch to Ultra-expanded */
p.ultra-expanded {
font-stretch: ultra-expanded;
}浏览器输出
在上例中，输出显示了根据不同的 font-stretch 值而具有不同宽度的文本。
注意：如果当前字体不支持 condensed 和 expanded 字面量，font-stretch 属性将不起作用。