V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Get Google Chrome
Vimium · 在 Chrome 里使用 vim 快捷键
MajestySolor
V2EX  ›  Chrome

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

  •  
  •   MajestySolor · 2019-08-24 05:57:16 +08:00 · 2109 次点击
    这是一个创建于 1679 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如思源黑体,`font-weight:100` 对应的是 extralight,`font-weight:200` 对应的是 light,在 firefox 里这些字重设定是能正确作用的,但是 chrome 就无法正确识别,这是 chrome 自己的 bug 还是其他问题?
    5 条回复    2019-08-24 11:42:41 +08:00
    kerr92
        1
    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
        2
    MajestySolor  
    OP
       2019-08-24 09:35:41 +08:00
    @kerr92 #1 但是同样的 css,firefox 是可以正确作用显示出所有字重的
    kerr92
        3
    kerr92  
       2019-08-24 11:05:16 +08:00   ❤️ 2
    @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
        4
    mxalbert1996  
       2019-08-24 11:35:36 +08:00 via Android
    @kerr92 字体文件里是包含字重数值的,不可能根据字体名字来判断,因为名字是可以随便写的。
    另外 Normal 的字重数值是 350,跟 Regular 的 400 只差 50,不直接指定的话浏览器是不会用的。
    MajestySolor
        5
    MajestySolor  
    OP
       2019-08-24 11:42:41 +08:00
    @kerr92 #3 感谢大佬,是我的问题,我是用的 CentBrowser,CentBrowser 只能渲染出 regular 和 bold 2 个字重,应该是 CentBrowser 自己的问题,chrome 是正常的。本来以为同是 chromium 内核效果应该是一样的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3682 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 00:52 · PVG 08:52 · LAX 17:52 · JFK 20:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.