字体厚度 | 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
