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

2019-08-24 05:57:16 +08:00
 MajestySolor
比如思源黑体,`font-weight:100` 对应的是 extralight,`font-weight:200` 对应的是 light,在 firefox 里这些字重设定是能正确作用的,但是 chrome 就无法正确识别,这是 chrome 自己的 bug 还是其他问题?
2214 次点击
所在节点    Chrome
5 条回复
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
@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 内核效果应该是一样的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/594657

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX