CSS @font-face - font-stretch

CSS 描述符font-stretch 允许作者在 @font-face at 规则中为指定的字体提供正常、压缩或扩展的字体。

描述符 font-stretch 专门用于指定字体 face'e stretch。这些字体对应于同一字体系列的不同样式。

描述符 font-stretch 的值与其对应的 font-stretch 属性的值相同。

不应将描述符 font-stretch 与 font-stretch 属性混淆。font-stretch 描述符仅与 @font-face at 规则一起使用，以显式选择该规则的扩展或缩小字体。然后，在样式表中的其他位置使用 font-stretch 属性，将该字体宽度应用于元素。

可能的值

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

normal：指定普通字体。
Semi-condensed、condensed、extra-condensed、ultra-condensed：指定比正常字体更压缩的字体，其中 ultra-condensed 是最压缩的形式。
半展开、展开、超展开、超展开：指定比正常情况更扩展的字体，其中超扩展是展开程度最高的形式。
<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 规则内使用的百分比范围 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>

打印本页