话说 chrome 为什么无法正确识别 css 里对同一个字体的不同字重设定？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vimium · 在 Chrome 里使用 vim 快捷键

这是一个创建于 1927 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如思源黑体，`font-weight:100` 对应的是 extralight，`font-weight:200` 对应的是 light，在 firefox 里这些字重设定是能正确作用的，但是 chrome 就无法正确识别，这是 chrome 自己的 bug 还是其他问题？

Chrome

正确

Firefox

extralight

5 条回复 • 2019-08-24 11:42:41 +08:00

kerr92

2019-08-24 08:30:11 +08:00

无责任猜测，字体信息里面对字重的描述可能仅仅是 ExtraLight、Light 等名称，而不是 100、200 这种 CSS 标准定义的数值，因此浏览器并不知道思源黑体的 ExtraLight 对应 100，Light 对应 200，绝不仅仅是 Chrome 有这样的字重不匹配问题。

下面是 CSS Fonts Module Level 4 提供的字重数值对应的常用名称。

100 - Thin
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)

MajestySolor

2019-08-24 09:35:41 +08:00

@kerr92 #1 但是同样的 css，firefox 是可以正确作用显示出所有字重的

kerr92

2019-08-24 11:05:16 +08:00

@MajestySolor 我不厌其烦地验证了一下……见 https://codepen.io/dearke/pen/KKPaYLY

安装的思源黑体版本 2.000 ，原字体实际包含 7 款字重：

Source Han Sans SC ExtraLight
Source Han Sans SC Light
Source Han Sans SC Normal
Source Han Sans SC Regular
Source Han Sans SC Medium
Source Han Sans SC Bold
Source Han Sans SC Heavy

在 Windows 10 1903 + Google Chrome 76 上的效果：

Source Han Sans SC ExtraLight
Source Han Sans SC ExtraLight
Source Han Sans SC Light
Source Han Sans SC
Source Han Sans SC Medium
Source Han Sans SC
Source Han Sans SC
Source Han Sans SC Heavy
Source Han Sans SC Heavy

实际渲染 6 款字重

在 Windows 10 1903 + Mozilla Firefox 68 上的效果：

Source Han Sans SC ExtraLight
Source Han Sans SC ExtraLight
Source Han Sans SC Light
Source Han Sans SC
Source Han Sans SC Medium
Source Han Sans SC Bold
Source Han Sans SC Bold
Source Han Sans SC Heavy
Source Han Sans SC Heavy

实际渲染 6 款字重

在 macOS 10.14 + Google Chrome 76 上的效果：

Source Han Sans SC ExtraLight
Source Han Sans SC ExtraLight
Source Han Sans SC ExtraLight
Source Han Sans SC Normal
Source Han Sans SC Medium
Source Han Sans SC
Source Han Sans SC
Source Han Sans SC Heavy
Source Han Sans SC Heavy

实际渲染 5 款字重

在 macOS 10.14 + Mozilla Firefox 68 上的效果：

Source Han Sans SC Light
Source Han Sans SC Light
Source Han Sans SC Light
Source Han Sans SC
Source Han Sans SC Medium
Source Han Sans SC Bold
Source Han Sans SC Bold
Source Han Sans SC Heavy
Source Han Sans SC Heavy

实际渲染 5 款字重

其中部分 Regular、Bold 字重名称会被开发者工具省略，无论是 Chrome 还是 Firefox 均没能渲染出 7 款字重……

mxalbert1996

2019-08-24 11:35:36 +08:00 via Android

@kerr92 字体文件里是包含字重数值的，不可能根据字体名字来判断，因为名字是可以随便写的。
另外 Normal 的字重数值是 350，跟 Regular 的 400 只差 50，不直接指定的话浏览器是不会用的。

MajestySolor

2019-08-24 11:42:41 +08:00

@kerr92 #3 感谢大佬，是我的问题，我是用的 CentBrowser，CentBrowser 只能渲染出 regular 和 bold 2 个字重，应该是 CentBrowser 自己的问题，chrome 是正常的。本来以为同是 chromium 内核效果应该是一样的