这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

 font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 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
Animation typea font weight
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

normal
正常粗细。与400等值。
bold
 加粗。 与700等值。
lighter
比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
bolder
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
100, 200, 300, 400, 500, 600, 700, 800, 900
数值化的规定字体粗细程度的方式,提供了除了 normal 和 bold 之外更多的值。

回退机制

如果指定的粗细值没有精确匹配,那么将通过如下策略决定实际渲染时将使用什么粗细值:

  • 如果指定的粗细值大于 500,那么将使用最接近的粗体值(或者,如果没有相应的粗体值,将使用最接近的细体值)。
  • 如果指定的粗细值小于 400,那么将使用最接近的细体值(或者,如果没有相应的细体值,将使用最接近的粗体值)。
  • 如果指定的粗细值为 400,那么将使用粗细值 500。如果 500 也不可用,那么将使用“指定值小于400”策略。
  • 如果指定的粗细值为 500,那么将使用粗细值 400。如果 400 也不可用,那么将使用“指定值小于400”策略。

以上策略意味着,如果一个字体只有 normalbold 两种粗细值选择,指定粗细值为 100-500 时,实际渲染时将使用 normal,指定粗细值为 600-900 时,实际渲染时将使用 bold

相对粗细值的解析

当指定的是相对粗细值 lighterbolder 时,将使用如下图表来决定元素渲染时的绝对粗细值:

继承值(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-absolute> | bolder | lighter

where
<font-weight-absolute> = normal | bold | <number>

例子

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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1.3WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 3.1Samsung Internet Android Full support Yes
<number> syntaxChrome Full support 62Edge ? Firefox Full support 61IE No support NoOpera ? Safari ? WebView Android ? Chrome Android Full support 62Edge Mobile ? Firefox Android Full support 61Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

文档标签和贡献者

最后编辑者: kaigeliao2018,