CSS @font-face - font-stretch

font-stretch CSS 描述符允許作者為@font-face at 規則中指定的字型提供常規、緊縮或擴充套件字型樣式。

font-stretch 描述符專門用於指定字型的拉伸程度。這些字型樣式對應於同一字體系列的不同樣式。

font-stretch 描述符采用與其對應的 font-stretch 屬性相同的值。

不要將font-stretch 描述符與font-stretch 屬性混淆。font-stretch 描述符僅與@font-face at 規則一起使用，以顯式地為該規則選擇擴充套件或緊縮字型樣式。font-stretch 屬性隨後在樣式表中的其他位置使用，以將該字型寬度應用於元素。

可能的值

font-stretch CSS 描述符可以具有以下值之一：

normal：指定常規字型樣式。
semi-condensed, condensed, extra-condensed, ultra-condensed：指定比常規字型更緊縮的字型樣式，其中ultra-condensed是最緊縮的樣式。
semi-expanded, expanded, extra-expanded, ultra-expanded：指定比常規字型更擴充套件的字型樣式，其中ultra-expanded是最擴充套件的樣式。
<percentage>：百分比值，可以是 50% 到 200%（包括）。不允許使用負值。

語法

font-stretch = "normal" | <'font-stretch'>;

宣告font-stretch 的幾種方法如下：

/* single values */
font-stretch = "normal";
font-stretch = "semi-condensed";
font-stretch = "condensed";
font-stretch = "extra-condensed";
font-stretch = "ultra-condensed";
font-stretch = "semi-expanded";
font-stretch = "expanded";
font-stretch = "extra-expanded";
font-stretch = "ultra-expanded";
font-stretch = 75%;
font-stretch = 200%;

/* multiple values */
font-stretch = 50% 120%;
font-stretch = semi-condensed ultra-condensed;

關鍵字到數字對映

下表解釋了關鍵字值及其對應的百分比值的對映：

關鍵字	百分比
normal	100%
semi-condensed	87.5%
condensed	75%
extra-condensed	62.5%
ultra-condensed	50%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

可變字型

許多字型具有特定寬度，對應於其中一個關鍵字值。但是，某些字型支援範圍更廣的拉伸，精度更高，這些字型稱為可變字型。它們使使用者能夠更好地控制所選字型的字重。對於指定這些字型的拉伸，百分比值非常有用。

TrueType 或OpenType 可變字型的wdth 變體可用於實現不同的字形寬度。

無障礙問題：字型過於緊縮，尤其是在字型對比度低的顏色比例的情況下，對於患有閱讀障礙和其他認知障礙的人來說可能不夠清晰。

CSS font-stretch - 百分比值

以下示例演示了使用@font-face at 規則中使用的50% 和 200% 百分比範圍設定字型樣式的拉伸值。

<html>
<head> 
<style>
   @font-face {
      src: local("monospace");
      font-family: "f1";
      font-style: normal;
      font-stretch: 50% 200%;
   }

   .container {
      font: 2rem "f1", sans-serif;
   }

   .font-condensed {
      font-stretch: 50%;
   }

   .font-normal {
      font-stretch: 100%;
   }

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

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

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

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

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

   .font-extra-expanded {
      font-stretch: extra-expanded;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="font-condensed">ultra-condensed (50%)</p>
      <p class="font-normal">normal (100%)</p>
      <p class="font-expanded">ultra-expanded (200%)</p>
      <p class="font-semi-condensed">semi-condensed</p>
      <p class="font-ultra-condensed">ultra-condensed</p>
      <p class="font-semi-expanded">semi-expanded</p>
      <p class="font-extra-expanded">extra-expanded</p>
      </div>
</body>
</html>

列印頁面