CSS font-stretch 字体水平宽窄

CSS 中font-stretch属性允许我们从字体系列中选择普通、扩展压缩的字体。此属性将文本设置为与字体的默认宽度相比更宽或更窄。它不适用于任何字体,但仅适用于具有宽度变化的字体系列。

此 CSS 属性仅适用于具有扩展面和压缩面等附加面的字体;否则,对于没有压缩或扩展面的字体将无影响。

以下语法给出了用于选择字体宽度的九个关键字值。

句法 (Syntax)

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该值使文本非常宽。

让我们通过一个例子来理解上面的属性值。

例子 (Example)

<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>

输出

CSS font-stretch 属性


  • 使用社交账号登录,本站支持
全部评论(0)