Font Weight

  • 100 - Thin
  • 200 - Extra Light (Ultra Light)
  • 300 - Light
  • 400 - Normal,Regular,Roman,Book
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold (Ultra Bold)
  • 900 - Black (Heavy)

CSS规定:

  • 如果Medium是唯一变形,则它的font-weight为400

  • 未指定500的加粗度时,和400一致

  • 未指定300的加粗度时,指定比400更细的字体变形。如果没有比400更细的变形,则与400一致。100,200亦如此。

  • 未指定600的加粗度时,指定比400更粗的字体变形。若没有,则与500一致。700,800,900也是这样。

1.只有一种变形

比如SimSun,如下图:

中易宋体的不同font weight
中易宋体的不同font weight

Regular对应的font-weight是400.当font-weight=500时,它和400一样。100,200,300最后和400都一致。按理来说,当font-weight>500时,也应 该与400一样。但是浏览器会渲染加粗(伪粗体),和别的有bold的字体是不一样的。

只有一种变形的不只是SimSun,还有华文黑体。浏览器又一次给了个惊喜:

华文黑体的不同font weight
华文黑体的不同font weight

大于500不给渲染加粗了,摔!

2.有两种变形的字体

Hiragino Sans GB,分别有W3和W6两种变形。w3对应regular,w6对应bold。

Hiragino Sans GB的不同font weight
Hiragino Sans GB的不同font weight

600~900对应的是粗体。

3.当有多种变形的时候,浏览器之间就存在分歧了。

比如"Helvetica Neue"(ultra light, thin, light, regular, medium, bold六种变形):

Chrome:

Chrome下Helvetica Neue的不同font weight
Chrome下Helvetica Neue的不同font weight

Firefox:

FireFox下Helvetica Neue的不同font weight
FF下Helvetica Neue的不同font weight
明显,在Firefox里200和300是不一样的。

在遇到Google Fonts(安装在Mac上)时,FF和webkit那几个浏览器一样糟糕。比如Roboto(6种变形:thin, light, regular, medium, bold, black)

FireFox下Roboto的不同font weight
FF下Roboto的不同font weight

Roboto thin对应的是weight为100的时候,但是无论是哪个浏览器中,weight 100和200都是light。

还好,像比如Roboto这样的Google fonts一般会使用:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>

来使用该字体:

roboto different weight
FF下roboto不同font weight
明显看得出100, 200(thin)和300(light)是不一样的。

此外,各个字体之间的font weight也没统一命名:比如Helvetica Nenue的ultra light是最细的字体,但Roboto的thin是Roboto最细的字体。 Noto Sans CJK SC(thin, light, demilight, regular, medium, bold, black)更甚,居然用350这个数值:

Noto sans cjk sc
Noto sans cjk sc DemiLight

结果:

Noto sans cjk sc different weight
FF下Noto sans cjk sc不同font weight

如图,thin, light两种粗细在浏览器上显示不了。

参考文献

  1. 浏览器是怎样根据 CSS 中是的 font-weight 属性值渲染出具体字体粗细程度的?有统一规定的计算方式吗?

  2. How is text thickness calculated according to css property “font-weight”?

  3. Missing "Light" Option for Open Sans