CSS 中的font-stretch属性允许我们从字体系列中选择普通、扩展或压缩的字体。此属性将文本设置为与字体的默认宽度相比更宽或更窄。它不适用于任何字体,但仅适用于具有宽度变化的字体系列。
此 CSS 属性仅适用于具有扩展面和压缩面等附加面的字体;否则,对于没有压缩或扩展面的字体将无影响。
以下语法给出了用于选择字体宽度的九个关键字值。
font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
属性值
此CSS属性的属性值列表如下:
关键词 | 描述 |
---|---|
normal | 这是默认值,不会拉伸任何字体。 |
semi-condensed | 它稍微压缩了元素的文本字符。该值使文本比正常更窄,但不会比condensed更窄。 |
condensed | 该值使文本比semi-condensed窄,但不比extra-condensed窄。 |
extra-condensed | 该值使文本比condensed窄,但不比ultra-condensed窄。 |
ultra-condensed | 该值使文本极度缩小。 |
semi-expanded | 它稍微加宽了元素的文本字符。此值使文本比正常更宽,但不会比扩展更宽。 |
expanded | 该值使文本比semi-expanded宽,但不比extra-expanded宽。 |
extra-expanded | 该值使文本比Expanded宽,但不比ultra-expanded宽。 |
ultra-expanded | 该值使文本非常宽。 |
让我们通过一个例子来理解上面的属性值。
<h1> Example of the font-stretch property </h1> <div class = "normal">normal</div> <div class = "semi-condensed">semi-condensed</div> <div class = "condensed">condensed</div> <div class = "extra-condensed">extra-condensed</div> <div class = "ultra-condensed">ultra-condensed</div> <div class = "semi-expanded">semi-expanded</div> <div class = "expanded">expanded</div> <div class = "extra-expanded">extra-expanded</div> <div class = "ultra-expanded">ultra-expanded</div>
输出