字体厚度 | font-weight
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;
| 初始值 | normal |
|---|---|
| 应用于 | all elements. It also applies to ::first-letter and ::first-line. |
| 是否继承 | yes |
| 适用媒体 | visual |
| 计算值 | the keyword or the numerical value as specified, with bolder and lighter transformed to the real value |
| 动画类型 | a font weight |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
font-weight属性是使用下面列表中的单个关键字值指定的。
值
normal正常的字体宽度。和400一样。
后备权重
如果给定的确切宽度不可用，则使用以下启发式来确定实际宽度：
- 如果宽度大于
500，则使用最接近的可用最大宽度（或者，如果没有指定宽度，则选择最接近的宽度）。
- 如果宽度小于
400，则使用最接近的可用宽度（如果没有，则使用最近的可用宽度）
- 如果给定的宽度是
400，恰好500被使用。如果500不可用，则启发式的使用小于400的字体权重。
- 如果重量正好
500是给出的，那么400被使用了。如果400则使用字体权重小于400的启发式。
这意味着，仅提供字体normal和bold，100- 500是normal和600- 900是bold。
相对宽度的含义
当指定lighter或bolder指定时，下面的图表显示了如何确定元素的绝对字体重量：
| Inherited value | 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）大致对应于以下常见的重量名称：
| Value | Common weight name |
|---|---|
| 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) |
插值
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;
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Fonts Module Level 3The definition of 'font-weight' in that specification. | Candidate Recommendation | No change. |
| CSS TransitionsThe definition of 'font-weight' in that specification. | Working Draft | Defines font-weight as animatable. |
| CSS Level 2 (Revision 1)The definition of 'font-weight' in that specification. | Recommendation | No change. |
| CSS Level 1The definition of 'font-weight' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 2.0 | (Yes) | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.3 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.0) | 6.0 | 6.0 | 3.1 |
