字体厚度 | 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
一样。
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
指定时,下面的图表显示了如何确定元素的绝对字体重量:
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 |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com