CSS - font-stretch 属性

CSS 的font-stretch属性可以使文本字符比字体的默认字符宽度更宽或更窄。

语法

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | percentage | initial | inherit;

属性值

值	描述
ultra-condensed	使文本尽可能窄。
extra-condensed	使文本比 condensed 窄得多，但比 ultra-condensed 宽一些。
condensed	使文本比 semi-condensed 窄，但比 extra-condensed 宽一些。
semi-condensed	与 normal 值相比，使文本变窄。
normal	不进行字体拉伸。默认值。
semi-expanded	与 normal 值相比，使文本变宽。
expanded	使文本比 semi-expanded 宽，但比 extra-expanded 窄一些。
extra-expanded	使文本比 expanded 宽，但比 ultra-expanded 窄一些。
ultra-expanded	使文本尽可能宽。
百分比	文本的拉伸以百分比指定。
initial	将属性设置为其初始值。
inherit	从父元素继承该属性。

CSS 字体拉伸属性示例

以下示例使用不同的值解释了font-stretch属性。

使用 Normal 值的字体拉伸属性

为了不对文本引入任何字体拉伸，我们使用normal值。这是默认值。这些值已在以下示例中使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: brown;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .ex1 {
         font-stretch: normal;
      }

      .ex2 {
         font-stretch: 150%;
      }
   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: normal, 150%
   </h4>
   <p class="ex1">
      This text has normal font-stretch.
   </p>
   <p class="ex2">
      This text has 150% font-stretch.
   </p>
</body>

</html>

使用不同 Condensed 值的字体拉伸属性

为了对文本引入窄拉伸，我们可以使用 condensed 值的不同变体，它们分别是：condensed、semi-condensed、extra-condensed和ultra-condensed。ultra-condensed是最窄的，而condensed是最不窄的，其他值介于这两者之间。这些值已在以下示例中使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: red;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .condensed {
         font-stretch: condensed;
      }

      .semi-condensed {
         font-stretch: semi-condensed;
      }

      .extra-condensed {
         font-stretch: extra-condensed;
      }

      .ultra-condensed {
         font-stretch: ultra-condensed;
      }

   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: condensed, semi-condensed,
      extra-condensed, ultra-condensed
   </h4>
   <p class="condensed">
      This text has condensed font-stretch.
   </p>
   <p class="semi-condensed">
      This text has semi-condensed font-stretch.
   </p>
   <p class="extra-condensed">
      This text has extra-condensed font-stretch.
   </p>
   <p class="ultra-condensed">
      This text has ultra-condensed font-stretch.
   </p>
</body>

</html>

使用不同 Expanded 值的字体拉伸属性

为了对文本引入宽拉伸，我们可以使用 expanded 值的不同变体，它们分别是：expanded、semi-expanded、extra-expanded和ultra-expanded。ultra-expanded是最宽的，而expanded是最不宽的，其他值介于这两者之间。这些值已在以下示例中使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: blue;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .expanded {
         font-stretch: expanded;
      }

      .semi-expanded {
         font-stretch: semi-expanded;
      }

      .extra-expanded {
         font-stretch: extra-expanded;
      }

      .ultra-expanded {
         font-stretch: ultra-expanded;
      }

   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: expanded, semi-expanded,
      extra-expanded, ultra-expanded
   </h4>
   <p class="expanded">
      This text has expanded font-stretch.
   </p>
   <p class="semi-expanded">
      This text has semi-expanded font-stretch.
   </p>
   <p class="extra-expanded">
      This text has extra-expanded font-stretch.
   </p>
   <p class="ultra-expanded">
      This text has ultra-expanded font-stretch.
   </p>
</body>

</html>

使用百分比值的字体拉伸属性

文本的字体拉伸也可以用百分比值（例如 100%、50% 等）给出。根据提供的价值，文本的拉伸会受到影响。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @font-face {
         font-family: "LeagueMonoVariable";
         src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
         font-style: normal;
      }

      p {
         color: purple;
         font-weight: bold;
         font-family: "LeagueMonoVariable", sans-serif;
      }

      .ex1 {
         font-stretch: 150%;
      }

      .ex2 {
         font-stretch: 350%;
      }
   </style>
</head>

<body>
   <h1>
      CSS font-stretch property
   </h1>
   <h4>
      font-stretch: 150%, 350%
   </h4>
   <p class="ex1">
      This text has 150% font-stretch.
   </p>
   <p class="ex2">
      This text has 350% font-stretch.
   </p>
</body>

</html>

注意：如果您使用的字体不支持 condensed 或 expanded 形式，则font-stretch属性将不起作用。

支持的浏览器

属性
font-stretch	48.0	9.0	9.0	11.0	35.0

css_properties_reference.htm

打印页面