search

BlackGlory / appoint-font

🌳 The easiest font setting extension.
https://chrome.google.com/webstore/detail/lmjdabbpgabigbonekfpjhfgjekpnkge
MIT License
63 stars 5 forks source link

关于某些页面上继承自body或html的字体样式 #16

Closed Steve-Cheung-emct closed 1 year ago

Steve-Cheung-emct commented 1 year ago

新版字体插件（2023.0.4）在某些网页上，似乎无法针对部分中文标点（U+2018、2019、201C、201D、2026、2014、2015, etc）以及全部的西文字符（a-zA-Z0-9, etc）生效。

具体描述：

使用浏览器自身的字体配置并关闭插件，在某些网站上，部分中文标点符号、以及全部的西文会使用网页自身配置，但中文漢字会使用chrome的自定义字体配置。这就造成一个现象，即中文和西文字重不匹配，漢字字符 为 font-weight: 400; 但 前面提及的中文标点符号以及全部的西文字重皆为 font-weight: 300; ，且 这部分中文标点符号的 @font-face 变成西文的样式。

也就是说，在这些特定网页上，【钦定字体】插件没有针对chrome字体配置产生影响？额外的，似乎还能说明【新版本的chrome】自身的字体配置存在着问题？毕竟前述标点在某些语境下也可做西文标点，但在中文网页中却优先配置为西文，令人不爽。（遗憾的是这部分没法验证，chrome的自定义字体配置无法清空处理）

【检查】「样式」并消选font: xxx; 或 font-family: xxx; 

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif; */
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    /* font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; */
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

body {
    line-height: 24px;
    /* font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; */
}

消选以上font配置，将激活继承自html的以下特性，并且全盘替换网页字体为chrome的自定义字体设置（包括上面提到的中文标点字符，毕竟中文标点符号要搭配漢字显示）。

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

虽然得到了结果，但我情感上仍不能理解这样的网页动作；而且不管【钦定字体】如何配置，在这种网页上都起不到效果。

（不过我感觉23年2月底升级的chrome浏览器，在某些页面上字体突然变得十分难看，猜测原因可能来自于chrome本身？毕竟不久前同样的网页同样的配置，也没出现令人遗憾的剧变，怪哉）

望解答，谢谢

附chrome字体配置如下：

标准字体：华康金刚黑A Std Serif 字体：森泽UD黎明体Gb4 Sans-serif 字体：华康金刚黑A Std 宽度固定的字体：等距更纱黑体SC

以上四种字体均完整覆盖GB18030-2000所涵盖的字符范围（即GBK+ CJK-A）

【钦定字体】的配置如下，并在高级选项中配置 font-weight: 400;

标准替换1：华康金刚黑A Std 标准替换2：Arial 等宽替换1：等距更纱黑体SC 等距替换2：Courier New

以上

Steve-Cheung-emct commented 1 year ago

20230302132512

20230302131801

20230302131836

BlackGlory commented 1 year ago

你的中文表达非常混乱, 问题描述有着前后矛盾的部分, 但我可以大概猜到你遇到的问题是什么: 扩展程序里定义的规则生效的顺序与你期望的规则生效的顺序相反, 也就是 #14 的副本. 你可以尝试把规则的顺序调换一下, 看看结果是否符合预期.

Steve-Cheung-emct commented 1 year ago

再次验证。

1，关闭插件，修改chrome字体配置中的Sans-serif 字体，结果：西文和部分中文标点，没有效果。 2，打开插件，配置前述规则，结果：西文和部分中文标点，没有效果。 3，打开插件，交换规则顺序，结果：西文和部分中文标点，没有效果。 4，打开插件，规则中关闭西文配置。结果：西文和部分中文标点，没有效果。 5，查看网站用户设置，发现其中有字体配置，在对话框中输入字体名称。结果：网页正文内有效果，评论区内没有效果。 6，关闭插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成chrome的字体配置。 7，开启插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成插件开启时的替换规则。

以上

BlackGlory commented 1 year ago

在关闭扩展程序的情况下，标点是错误的，这个现象很奇怪。

你有安装思源黑体吗？从前面提供的CSS来看，网页只设置了思源黑体这一种中文字体，后面的好像都是英文字体。如果我没记错的话，这会导致浏览器在找不到思源黑体的情况下，优先显示英文字体包含的字符，然后才轮到中文字体。很少有网站会这么写字体规则。

Steve-Cheung-emct @.***> 于 2023年3月3日周五 下午3:14写道：

再次验证。

1，关闭插件，修改chrome字体配置中的Sans-serif 字体，结果：西文和部分中文标点，没有效果。 2，打开插件，配置前述规则，结果：西文和部分中文标点，没有效果。 3，打开插件，交换规则顺序，结果：西文和部分中文标点，没有效果。 4，打开插件，规则中关闭西文配置。结果：西文和部分中文标点，没有效果。 5，查看网站用户设置，发现其中有字体配置，在对话框中输入字体名称。结果：网页正文内有效果，评论区内没有效果。 6，关闭插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成chrome的字体配置。 7，开启插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成插件开启时的替换规则。

以上

— Reply to this email directly, view it on GitHub https://github.com/BlackGlory/appoint-font/issues/16#issuecomment-1453082806, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKNPSWP37YI2RJSZOHPMY3W2GK6DANCNFSM6AAAAAAVM575PY . You are receiving this because you commented.Message ID: @.***>

BlackGlory commented 1 year ago

不对，Source Sans Pro是英文字体。也就是说这个网站本身就没有设置过中文字体。 哦，还是有一个PingFang SC的，只是优先级不如其他规则。

BlackGlory @.***> 于 2023年3月3日周五 下午3:29写道：

在关闭扩展程序的情况下，标点是错误的，这个现象很奇怪。

你有安装思源黑体吗？从前面提供的CSS来看，网页只设置了思源黑体这一种中文字体，后面的好像都是英文字体。如果我没记错的话，这会导致浏览器在找不到思源黑体的情况下，优先显示英文字体包含的字符，然后才轮到中文字体。很少有网站会这么写字体规则。

Steve-Cheung-emct @.***> 于 2023年3月3日周五 下午3:14写道：

再次验证。

1，关闭插件，修改chrome字体配置中的Sans-serif 字体，结果：西文和部分中文标点，没有效果。 2，打开插件，配置前述规则，结果：西文和部分中文标点，没有效果。 3，打开插件，交换规则顺序，结果：西文和部分中文标点，没有效果。 4，打开插件，规则中关闭西文配置。结果：西文和部分中文标点，没有效果。 5，查看网站用户设置，发现其中有字体配置，在对话框中输入字体名称。结果：网页正文内有效果，评论区内没有效果。 6，关闭插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成chrome的字体配置。 7，开启插件，右键菜单栏【检查】。屏蔽继承自body和html的所有字体配置，此时网页内容全部替换成插件开启时的替换规则。

以上

— Reply to this email directly, view it on GitHub https://github.com/BlackGlory/appoint-font/issues/16#issuecomment-1453082806, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKNPSWP37YI2RJSZOHPMY3W2GK6DANCNFSM6AAAAAAVM575PY . You are receiving this because you commented.Message ID: @.***>

BlackGlory commented 1 year ago

我可以在本地还原这个现象.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    ‘我能吞下玻璃而不伤身体。’
  </body>
</html>

image

这里的U+2018和U+2019确实用了Arial字体, 但这么显示恰好是正确的, 因为U+2018和U+2019不是中文标点符号.

BlackGlory commented 1 year ago

如果我们在前面放一个中文字体, 就会"正确显示", 这也只是因为中文字体覆盖了相应的字符.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Noto Serif CJK SC, Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    ‘我能吞下玻璃而不伤身体。’
  </body>
</html>

image

BlackGlory commented 1 year ago

结论是, 你访问的这个网站的CSS字体样式是写错的, 并且网站里用的标点符号也很容易导致在中英文混用时显示英文字体. 因为那些字符存在于英文字体里, 而英文字体的优先级比浏览器字体(sans-serif)的优先级高.

这可能是因为网站程序本来就不是为显示中文内容而设计的, 否则不太可能犯这样的错误.

BlackGlory commented 1 year ago

如果只各设置一条规则, 并且不启用任何高级规则, 钦定字体是可以修复此错误的, 因为Arial会被替换掉.

image

image

BlackGlory commented 1 year ago

但如果你有第二条标准字体替换规则, 根据CSS的@font-face应用顺序, Arial会被用来替换Arial, 那么实际上就相当于没替换过.

image

image

BlackGlory commented 1 year ago

如果你把Arial的规则移到中文字体之前, 根据CSS的@font-face应用规则, 这里会用中文字体替换掉英文字体, 所以应该会如预期那样工作, 我想问题已经解决了.

image

image