这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
font-weight
CSS 属性指定了字体的粗细程度。 一些字体只提供 normal
和 bold 两种值。
初始值 | 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 |
是否适用于 CSS 动画 | yes, as a font weight |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; 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; font-weight: inherit;
值
normal
- 正常粗细。与
400等值。
bold
- 加粗。 与
700等值。
lighter
- 比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
bolder
- 比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
100
,200
,300
,400
,500
,600
,700
,800
,900
- 数值化的规定字体粗细成都的方式,提供了除了 normal 和 bold 之外更多的值。
回退机制
如果指定的粗细值没有精确匹配,那么将通过如下策略决定实际渲染时将使用什么粗细值:
- 如果指定的粗细值大于
500
,那么将使用最接近的粗体值(或者,如果没有相应的粗体值,将使用最接近的细体值)。 - 如果指定的粗细值小于
400
,那么将使用最接近的细体值(或者,如果没有相应的细体值,将使用最接近的粗体值)。 - 如果指定的粗细值为
400
,那么将使用粗细值500
。如果500
也不可用,那么将使用“指定值小于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 之间的数值大致对应如下的常见粗细值名称:
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 。
正式的语法
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 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 | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 font-weight |
Candidate Recommendation | No change. |
CSS Transitions font-weight |
Working Draft | Defines font-weight as animatable. |
CSS Level 2 (Revision 1) font-weight |
Recommendation | No change. |
CSS Level 1 font-weight |
Recommendation |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 2.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.3 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.0) | 6.0 | 6.0 | 3.1 |