font-weight - CSS | MDN

试一试

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

语法

css

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

font-weight 属性可以使用 <font-weight-absolute> 值或相对粗细值来指定，如下所示。

值

normal: 常规字体粗细。与 400 相同。
bold: 粗体字体粗细。与 700 相同。
<number>: 介于 1 到 1000 之间的 <number> 值，包含这两个值。数字越大表示越粗（或同样粗）。这使得可变字体可以进行精细控制。对于非可变字体，如果确切指定的粗细不可用，则使用回退粗细算法——可被 100 整除的数值对应于常见的粗细名称，如下面的常见粗细名称映射部分所述。
lighter: 比父元素相对更细一个字体粗细。请注意，只有四个字体粗细被考虑用于相对粗细计算；请参阅下面的相对粗细的含义部分。
bolder: 比父元素相对更粗一个字体粗细。请注意，只有四个字体粗细被考虑用于相对粗细计算；请参阅下面的相对粗细的含义部分。

回退粗细

如果给定的确切粗细不可用，则使用以下规则来确定实际渲染的粗细

如果给定的目标粗细介于 400 和 500 之间（含）
- 以升序查找目标与 500 之间的可用粗细。
- 如果未找到匹配项，则以降序查找小于目标的可用粗细。
- 如果未找到匹配项，则以升序查找大于 500 的可用粗细。
如果给定的粗细小于 400，则以降序查找小于目标的可用粗细。如果未找到匹配项，则以升序查找大于目标的可用粗细。
如果给定的粗细大于 500，则以升序查找大于目标的可用粗细。如果未找到匹配项，则以降序查找小于目标的可用粗细。

注意：回退粗细算法仅用于渲染。属性的计算值仍然是指定值。

相对粗细的含义

当指定 lighter 或 bolder 时，下表显示了如何确定元素的绝对字体粗细。

请注意，在使用相对粗细时，只考虑四个字体粗细——细体 (100)、常规体 (400)、粗体 (700) 和特粗体 (900)。如果字体家族有更多可用粗细，它们将被忽略，不用于相对粗细计算。

继承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

常见粗细名称映射

数值 100 到 900 大致对应于以下常见的粗细名称（请参阅 OpenType 规范）

值	常见粗细名称
100	细体 (Hairline)
200	特细体 (Ultra Light)
300	浅色
400	常规体 (Regular)
500	Medium
600	半粗体 (Demi Bold)
700	粗体
800	特粗体 (Ultra Bold)
900	黑体 (Heavy)
950	特黑体 (Ultra Black)

可变字体

虽然许多字体都有一个特定的粗细对应于常见粗细名称映射中的一个数字，但大多数可变字体支持一系列粗细，提供更精细的粒度，让设计师和开发者可以更好地控制所选的粗细。

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

此演示加载时设置了 font-weight: 500;。更改 .sample 选择器中 font-weight 属性的值，以查看文本粗细的变化（例如，200，700）。点击下面代码块中的“播放”以在 MDN Playground 中编辑示例

html

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

css

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "MutatorSans", sans-serif;
}

无障碍

有低视力障碍的人可能难以阅读 font-weight 值为 100（细体/发丝体）或 200（特细体）的文本，特别是如果字体具有低对比度颜色比。

正式定义

初始值	`normal`
应用于	所有元素和文本。它也适用于 `::first-letter` 和 `::first-line`。
继承性	是
计算值	指定的关键字或数值，其中 `bolder` 和 `lighter` 已转换为实际值
动画类型	按计算值类型

正式语法

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

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

示例

设置字体粗细

HTML

html

<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>

CSS

css

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

结果

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题

继承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

继承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

继承值	`bolder`	`lighter`
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700