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 July 2015.
概述
font-weight
CSS 属性指定了字体的粗细程度。一些字体只提供 normal
和 bold
两种值。
尝试一下
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 |
动画类型 | a font weight |
语法
值
回退机制
如果指定的权重值不可用,则使用以下规则来确定实际呈现的权重:
- 如果指定的权重值在
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 |
常见粗细值名称和数值对应
插值规律
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 |
浏览器兼容性
BCD tables only load in the browser