font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

试试

语法

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;

The font-weight property is specified using either a <font-weight-absolute> value or a relative weight value, as listed below.

值

normal

正常字体重量。与 400 相同。

bold

粗体字体重量。与 700 相同。

<number>

A <number> value between 1 and 1000, both values included. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. This allows fine-grain control for variable fonts. For non-variable fonts, if the exact specified weight is unavailable, a fallback weight algorithm is used — numeric values that are divisible by 100 correspond to common weight names, as described in the Common weight name mapping section below.

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 细体 (头发线)
200 超细体 (超细体)
300 细体
400 正常 (常规)
500 中粗体
600 半粗体 (Demi 粗体)
700 粗体
800 特粗体 (超粗体)
900 黑体 (特粗体)
950 特黑体 (超黑体)

可变字体

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

对于 TrueType 或 OpenType 可变字体，使用 "wght" 变体来实现不同宽度。

此演示加载时设置了font-weight: 500;。更改font-weight属性的值，查看文本字重的变化。

无障碍性

视力障碍者可能难以阅读设置了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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅