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>

打印页面