1. Web
  2. CSS
  3. @font-face
  4. font-weight

font-weight

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

font-weight CSS @font-face 描述符允许作者为 @font-face 规则中指定的字体指定单个字重或一系列字重。当 CSS 规则设置所需的字体粗细时，浏览器将使用此信息来选择合适的字体。

通常，开发者希望在同一字体族中使用不同粗细的字体。对于传统或*静态*字体，单个字体文件包含特定粗细和样式的字体族字符：例如，“Helvetica bold italic”。为了在 font-weight 属性调用特定粗细时能够显示 light、regular、bold 或 extra-bold 的字体，你可以为同一个字体族（所有字体族都具有相同的 font-family 描述符值）定义多个 @font-face 规则，每个规则对应一种或一系列粗细。

要声明用于一系列字重的字体，请将以空格分隔的一对字重值声明为 font-weight 描述符的值。当 CSS 规则通过设置 font-weight 属性或 font 简写属性来设置字重时，就会使用相应的字体。

例如，如果描述符是 font-weight: 400 600;，那么当属性是 font-weight: 450 或 font-weight: 550 时，该字体将用于该字体族。无论字体是静态字体还是可变字体，都将使用与该范围匹配的字体。在这种情况下，如果字体是静态字体，450 和 550 的外观将相同。如果字体是可变字体，后者会更粗。

该描述符对所有字体都相同，但为可变字体设置的范围通常会更大，甚至可能是 1 1000，以便对所有字重属性值都使用相同的字体。

语法

css
/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Defining a range */
font-weight: normal bold;
font-weight: 300 500;

值

font-weight 描述符采用以下形式之一

  • 关键字 auto。
  • 单个 <font-weight-absolute> 值。
  • 一对以空格分隔的 <font-weight-absolute> 值。

每个 <font-weight-absolute> 可以是以下任何一种

normal

正常字重。与 400 相同。

bold

粗体字重。与 700 相同。

<number>

一个介于 1 和 1000 之间（含）的 <number> 值。较大的数字表示比（或与）较小数字一样粗的字重。某些常用值对应于常见的字重名称，如下文常用字重名称映射部分所述。

常用字重名称映射

数值 100 到 900 大致对应以下常见的字重名称

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

可变字体

大多数字体都有一个特定的粗细，对应于常用字重名称映射中的一个数字。然而，一些称为可变字体的字体可以支持更大或更小粒度的字重范围，这可以使设计者对所选字重有更精确的控制。

对于 TrueType 或 OpenType 可变字体，“wght”变体用于实现不同的粗细。

无障碍

有视力障碍的人可能难以阅读 font-weight 值为 100 (Thin/Hairline) 或 200 (Extra Light) 的文本，尤其是在字体的颜色对比度较低的情况下。

正式定义

相关的 at-rule@font-face
初始值normal
计算值同指定值

正式语法

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

示例

选择 normal 和 bold 字体

在本例中，我们使用两个 @font-face 规则，从 "Fira Sans" 字体系列中引入了两种字体，一种是 normal 字重，一种是 bold 字重。我们设置 font-weight 描述符来匹配字体的粗细。

此后，CSS 规则只需设置 font-weight 属性，即可为“Fira Sans”系列选择 normal 或 bold 字体。请注意，<strong> HTML 元素也会选择 bold 字体，因为默认情况下 <strong> 元素的 CSS font-weight 属性值为 bold。

HTML

html
<p class="one">Fira Sans, `normal` weight paragraph</p>
<p class="two">Fira Sans, `bold` weight paragraph</p>
<p><strong>Fira Sans, &lt;strong&gt; element (`bold`)</strong></p>

CSS

css
@font-face {
  font-family: "Fira Sans";
  font-weight: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: bold;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

结果

设置字重范围

本示例演示了作者如何通过包含多个具有相同 font-family 值的 @font-face 声明，来为多种字重（和字体样式）包含多种字体。通过使用从 1 到 1000 的范围设置 font-weight 描述符，你可以在样式表的其余部分声明 font-weight（或 font-style），并知道将使用合适的字体。

HTML

html
<p class="one">This has a font weight of 100</p>
<p class="three">This has a font weight of 300</p>
<p class="four">This has a font weight of 400</p>
<p class="five">This has a font weight of 500</p>
<p class="seven">This has a font weight of 700</p>
<p class="nine">This has a font weight of 900</p>

CSS

如上一个示例所示，我们为 FireSans 字体系列的四种不同字体包含了四个 @font-face 声明。每个声明都设置为不同的字重值范围，但都使用相同的字体名称。

第一个声明使用 FiraSans-Regular，其相关的 font-weight 范围包括了所有可能的字重值范围。

其他三个声明使用了字体的 light、bold 和 extra-bold 版本，其相关的 font-weight 范围定义了该范围的子集，如下所示

  • light 字体与 1-300 的范围相关联
  • bold 字体与 500-700 的范围相关联
  • extra-bold 字体与 700-1000 的范围相关联

CSS 层叠确保后三个声明会覆盖在 FiraSans-Regular 声明中设置的部分范围。

css
@font-face {
  font-family: "Fira Sans";
  font-weight: 1 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 300;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 500 700;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: 100;
}

p.three {
  font-weight: 300;
}

p.four {
  font-weight: 400;
}

p.five {
  font-weight: 500;
}

p.seven {
  font-weight: 700;
}

p.nine {
  font-weight: 900;
}

结果

seven 段落使用了 extra bold 字体。虽然 font-weight: 700 同时匹配 FiraSans-Bold 和 FiraSans-ExtraBold 声明，但由于 FiraSans-ExtraBold 是后声明的，它会覆盖 FiraSans-Bold 在该值上的设置。

同样，100 和 300 都使用了 light 字体；尽管 FiraSans-Regular 和 FiraSans-Light 的范围都包含 300，但 FiraSans-Light 是后声明的。或者，我们也可以在 FiraSans-Light 之后声明 FiraSans-Regular，但如果这样做，就需要更改 font-weight 描述符的范围。

为可变字体设置范围

在本例中，我们使用 font-weight 描述符来限制使用可变字体时可以设置的粗细范围。

我们使用单个 @font-face 规则引入一种可变字体 "League Mono"。我们使用 font-weight: 300 700 值来有效地限制可用的粗细范围。如果 CSS 规则使用了我们的“League Mono”字体，那么如果它指定的粗细超出此范围，它得到的粗细将被限制在该范围内。

HTML

我们包含一个段落，其 <output> 最初设置为 400，因为这是未设置样式的段落文本的默认字重。该段落嵌套在另外两个段落之间，因此你可以比较渲染出的字重值与声明的字重值。

我们包含一个类型为 range 的 <input/range>，嵌套在 <label> 中，并设置 step 为 50。

html
<p>LeagueMono, font-weight: 300 (comparison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (example)</p>
<p>LeagueMono, font-weight: 700 (comparison)</p>
<label
  >Change the font weight:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

我们将 font-weight 描述符范围设置为 300 700，将可变字体限制在该范围内。

css
@font-face {
  font-family: "LeagueMono";
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-weight: 300 700;
}

p {
  font-family: "LeagueMono", serif;
  font-size: 1.5rem;
}

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: 700;
}

JavaScript

我们包含一个事件处理程序，用于更新段落的 font-weight 属性值，并更新文本以反映更改

js
const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");

range.addEventListener("change", () => {
  text.style.fontWeight = range.value;
  log.innerText = range.value;
});

结果

通过范围滑块更改段落的字重。请注意，示例段落不会比其上方的 300 段落更细，也不会比其下方的 700 段落更粗；字重被限制在 font-weight 描述符定义的范围内。

规范

规范
CSS 字体模块第 4 级
# font-prop-desc

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.