此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
font-weight
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
font-weightCSS 属性指定了字体的粗细程度。一些字体只提供normal 和bold 两种值。
尝试一下
font-weight: normal;font-weight: bold;font-weight: lighter;font-weight: bolder;font-weight: 100;font-weight: 900;<section> <p> 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
/* 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: 1font-weight: 100;font-weight: 100.6;font-weight: 123;font-weight: 200;font-weight: 300;font-weight: 321;font-weight: 400;font-weight: 500;font-weight: 600;font-weight: 700;font-weight: 800;font-weight: 900;font-weight: 1000;/* Global values */font-weight: inherit;font-weight: initial;font-weight: unset;| 初始值 | normal |
|---|---|
| 适用元素 | 所有元素和文本. It also applies to::first-letter and::first-line. |
| 是否是继承属性 | 是 |
| 计算值 | the keyword or the numerical value as specified, withbolder andlighter transformed to the real value |
| 动画类型 | 按计算值的类型 |
语法
值
回退机制
如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：
如果指定的权重值在
400和500之间（包括400和500）：- 按升序查找指定值与
500之间的可用权重； - 如果未找到匹配项，按降序查找小于指定值的可用权重；
- 如果未找到匹配项，按升序查找大于
500的可用权重。
- 按升序查找指定值与
如果指定值小于
400，按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。如果指定值大于
500，按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。
以上策略意味着，如果一个字体只有normal 和bold 两种粗细值选择，指定粗细值为100-500 时，实际渲染时将使用normal，指定粗细值为501-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 之间的数值大致对应如下的常见粗细值名称：
插值规律
font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200。
形式语法
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 darker than normal but less than a standard bold. */div { font-weight: 600;}/* Sets text enclosed within span tag to be one step lighter than the parent. */span { font-weight: lighter;}结果
规范
| Specification |
|---|
| CSS Fonts Module Level 4 # font-weight-prop |