字体厚度 | font-weight

font-weight CSS属性指定字体的宽度。可用的字体宽度取决于您正在使用的字体font-family。一些字体仅在normal和bold中可用。

/* Keyword values */
font-weight: normal;
font-weight: bold;

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

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

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

语法

font-weight属性是使用下面列表中的单个关键字值指定的。

值

normal正常的字体宽度。和400一样。

bold粗体字体重，和700一样。

lighter一种比父元素轻的字体。

bolder一种比父元素重的字体重量。

数字字体权重100，200，300，400，500，600，700，800，900

后备权重

如果给定的确切宽度不可用，则使用以下启发式来确定实际宽度：

• 如果宽度大于500，则使用最接近的可用最大宽度（或者，如果没有指定宽度，则选择最接近的宽度）。

• 如果宽度小于400，则使用最接近的可用宽度（如果没有，则使用最近的可用宽度）

• 如果给定的宽度是400，恰好500被使用。如果500不可用，则启发式的使用小于400的字体权重。

• 如果重量正好500是给出的，那么400被使用了。如果400则使用字体权重小于400的启发式。

这意味着，仅提供字体normal和bold，100- 500是normal和600- 900是bold。

相对宽度的含义

当指定lighter或bolder指定时，下面的图表显示了如何确定元素的绝对字体重量：

公共宽度映射

数值（100-- 900）大致对应于以下常见的重量名称：

插值

font-weight值是通过离散步骤（100的倍数）进行插值的。插值发生在实数空间中，并通过四舍五入到最接近的100的倍数而被转换为整数，在100的倍数之间的中间值向正无穷大舍入。

形式语法

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

实例

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

/* 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;
}

结果

规范

浏览器兼容性