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

列印頁面