font-stretch 属性使文本更宽或者更窄。
此属性是 CSS3 属性之一。
font-stretch 属性不适用于任何字体！ 它仅在字体系列具有宽度变化的面时才有效。
单独的 font-stretch 属性不会拉伸字体。
此属性具有以下值：
- font-stretch:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.FontStretch ="expanded"; |
字体的选择
为 font-stretch 属性值选择的面取决于相关字体支持的面。
如果字体没有提供与给定值匹配的面，则小于 100% 的值映射到较窄的面，大于或者等于 100% 的值映射到较宽的面。
CSS font-stretch 属性值说明
| 值 | 描述 |
|---|---|
| ultra-condensed | 使文本变得狭窄。 |
| extra-condensed | 使文本更窄，但不像超出超出值一样窄。 |
| condensed | 使文本更窄，但不像超出超出值一样窄。 |
| semi-condensed | 使文本更窄，但不像浓缩价值那样窄。 |
| normal | 没有字体伸展。这是此属性的默认值。 |
| semi-expanded | 使文本宽于正常。 |
| expanded | 使文本宽于半扩展。 |
| extra-expanded | 使文本宽于扩展。 |
| ultra-expanded | 使文本尽可能宽。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父母元素继承了属性。 |
语法
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;
font-stretch 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro';
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">A</span>
<span style="font-stretch: extra-condensed">A</span>
<span style="font-stretch: condensed">A</span>
<span style="font-stretch: semi-condensed">A</span>
<span style="font-stretch: normal">A</span>
<span style="font-stretch: semi-expanded">A</span>
<span style="font-stretch: expanded">A</span>
<span style="font-stretch: extra-expanded">A</span>
<span style="font-stretch: ultra-expanded">A</span>
</p>
</body>
</html>
日期：2020-06-02 22:14:32 来源：oir作者：oir