CSS font-stretch

CSS中的
font-stretch 属性允许我们选择
常规，扩展，或字体族的
精简字样。与字体的默认宽度相比，此属性将文本设置为更宽或更窄。

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

语法

 font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;

属性值

此 CSS属性的属性值是列表如下：

<身体>

关键字	说明
wider	使得文本更宽。
narrower	使得文本窄。
normal	这是默认值，不会拉伸任何字体。
semi-condensed	它稍微压缩元素的文本字符。此值使文本比普通窄。
condensed	此值使文本比semi-condensed窄。
extra-condensed	此值使文本比condensed窄。
ultra-condensed	此值使文本非常狭窄。
semi-expanded	它稍微扩大了元素的文本字符。此值使文本比普通宽。
expanded	此值使文本宽于semi-expanded。
extra-expanded	此值使文本宽于expanded。
ultra-expanded	此值使文本非常宽。

通过一个示例让我们了解上述属性值。

示例

 <!DOCTYPE html>
 <html>
 <head>
 <title>
 CSS font-stretch Property
 </title>
 <style>
 body{
 text-align: center;
 }
 div{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 color: blue;
 }
 .normal {
 font-stretch: normal;
 }
 .semi-condensed {
 font-stretch: semi-condensed;
 }
 .condensed {
 font-stretch: condensed;
 }
 .extra-condensed {
 font-stretch: extra-condensed;
 }
 .ultra-condensed {
 font-stretch: ultra-condensed;
 }
 .semi-expanded {
 font-stretch: semi-expanded;
 }
 .expanded {
 font-stretch: expanded;
 }
 .extra-expanded {
 font-stretch: extra-expanded;
 }
 .ultra-expanded {
 font-stretch: ultra-expanded;
 }
 </style>
 </head>
 <body>
 <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>
 </body>
 </html>

输出

CSS font-stretch_https://bianchenghao6.com_【CSS 教程】_第1张

CSS color

CSS font-weight