CSS @font-face - font-weight

CSS 描述符 font-weight 允许作者在 @font-face at 规则中为指定的字体指定字体权重。

描述符 font-weight 可以专门用于指定字体的 face'e 粗细，即字体应该看起来有多粗或多细。这些字体对应于同一字体系列的不同样式。

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

不应将描述符 font-weight 与 font-weight 属性混淆。描述符 font-weight 仅与 @font-face 规则一起使用，以显式为该规则选择粗体字体。然后，在样式表中的其他位置使用 font-weight 属性，将该字体权重应用于元素。

对于特定的字体系列，有一些有限的权重可用，如果不存在指定的权重，则使用附近的权重。没有粗体字体的字体由用户代理合成。为了避免这种情况，可以使用简写属性 font-synthesis。

可能的值

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

normal：指定正常字体粗细，等于 400。
bold：指定粗体字体粗细，等于 700。
<number>：指定 1 到 1000（含）之间的<number>值。较高的值对应于较粗的字体，而不是较低的值。

语法


font-weight = auto | normal | bold | <number [1,1000]> ]";

CSS font-weight - 权重名称映射

下表说明了数值及其对应的通用权重名称的映射：

值	常用砝码名称
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

CSS font-weight - 可变字体

许多字体都有特定的权重，对应于通用权重名称映射中的一个数字，如上表所示。但是有些字体在很大程度上支持一系列细粒度的权重，这些字体被称为可变字体。它们使用户能够更好地控制他们选择的字体粗细。

TrueType 或 OpenType 变量字体的 wght 变体在实现变化的权重时很有用。

辅助功能问题：font-weight 等于 100（细/发际线）或 200（额外浅）的字体，尤其是在对比度颜色比率低的字体的情况下，对于视力不佳的人来说可能不是很清楚。

CSS font-weight - 数字值

以下示例演示了字体的权重值设置，使用 @font-face 规则内使用的范围 100 和 900：


<html>
<head>	
<style>
	 @font-face {
	 	 	 font-family: "f1";
	 	 	 src: url("font/Brygada1918-Italic.ttf");
	 	 	 font-weight: 100,900;
	 	 	 }

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

	 	.font-wt-400 {
	 	 	 font-weight: 400;
	 	}

	 	.font-wt-bold {
	 	 	 font-weight: bold;
	 	}

	 	.font-wt-900 {
	 	 	 font-weight: 900;
	 	}
</style>
</head>
<body>
	 	 	 <p class="container font-wt-400">font - 400</p>
	 	 	 <p class="container font-wt-bold">font - bold</p>
	 	 	 <p class="container font-wt-900">font - 900</p>
</body>
</html>

打印本页