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，如下图：

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

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

大于500不给渲染加粗了，摔！

2.有两种变形的字体

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

600~900对应的是真粗体。

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

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

Chrome:

Firefox:

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

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'>

来使用该字体：

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

结果：

如图，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

字体2

1.font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体。

这一点觉得国内做得不错了。。吐槽一下我们的邻国日本，青一色的日文字体在前英文字体在后。不过日常他们确实偏爱日文字体的全角英文啊。

2.为什么经常看到网页中宋体用unicode而不用英文名（淘宝），

这是因为Firefox的某些版本和早期Opera识别不了中文字体的英文写法，比如SimSun。（unicode编码都可以通过escape(‘字体名’)获得。）

Mac下Opera因为是Webkit内核，所以也支持SimSun的写法了。

那写成font-family: arial,\5B8B\4F53,sans-serif好么？

答案是不好。因为Mac的Chrome,Safari等webkit系浏览器不认unicode转码过来的字体，事实上它连font-family: 宋体；这种写法都不接受... 如果是Mac的Chrome默认设置，显示的字体将会是stheiti。

3.字体fallback问题

参考文献1有很详细的介绍。

一些参考文献：

1. 字体漫谈

2. 最佳Web中文默认字体

3. 如何保证网页的字体在各平台都尽量显示为最高质量的黑体

4. 玉伯的字体测试

字体1

主要分为五大类字体：

1.serif字体:成比例（即不等宽），且有上下划线

常用的英文字体有Times, Georgia...

对应中文的‘白体’。

以前最常用的中易宋体SimSun其实无论中英文都是等宽的。wiki也把中易宋体（SimSun）归为等宽字体，但一般都把SimSun作为一种Serif字体。

2.sans-serif:成比例，无上下划线

常用的英文字体有：Helvetica, Verdana, Arial, Tahoma, Calibri, Roboto...

对应的中文字体是‘黑体’(为与黑体(比如Heiti SC和SimHei的中文名称）混淆，又称粗体)。除了上述黑体，常用的还有雅黑，Hiragino Sans GB,以及 Google和Adobe合作的Noto系列...

另外，Noto和Roboto是Google Material design建议字体。

3.monospace:不成比例（等宽），可能有下划线也可能没有

英文字体monaco曾是Mac终端上的默认字体。现为menlo，同样是等宽字体。除此还有Courier...代码一般会用等宽字体。

上图字体为monaco,很明显能看得出是等宽的。再对比下图的非等宽的Roboto(thin)的字体就更明显了。

最后看看中文字体（雅黑）对英文的处理

4.cursive:模仿人类的字体

5.fantasy:奇怪的字体