尝试一下
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 900;
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.
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: 1
font-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, with bolder and lighter transformed to the real value动画类型按计算值的类型
语法
值
normal
正常粗细。与 400 等值。
bold
加粗。与 700 等值。
lighter
比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。
bolder
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
一个介于 1 和 1000 (包含) 之间的
回退机制
如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：
如果指定的权重值在 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 之间的数值大致对应如下的常见粗细值名称：
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 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200。
形式语法
font-weight =
此语法反映了基于 CSS Fonts Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。
示例
HTML
html
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?'
I'm heavy
I'm lighter
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
浏览器兼容性
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年11月10日 by MDN contributors.
View this page on GitHub • Report a problem with this content