设置多个“替换标准字体”逻辑似乎顺序不正确

lainbo commented 1 year ago

设置如下

期望

页面按照设置界面的顺序，首先使用HarmonyOS Sans SC进行显示，如果有不支持的语言文字，则使用思源黑体进行补充；也就是按设置的顺序，从前依次向后

实际效果

页面首先使用了排在后面的思源黑体

BlackGlory commented 1 year ago

这是因为Appoint Font的规则顺序与生成的CSS @font-face规则顺序一致.

考虑以下代码:

<!DOCTYPE html>
<html>
  <head>
  <style>
    body {
      font-family: 微软雅黑;
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Fira Code");
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Noto Serif CJK SC");
    }
  </style>
  </head>
  <body>
    我能吞下玻璃而不伤身体.
  </body>
</html>

在这种情况下, 浏览器只加载Noto Serif CJK SC, 因为它是最后一条匹配上的规则.

再看另一种顺序:

<!DOCTYPE html>
<html>
  <head>
  <style>
    body {
      font-family: 微软雅黑;
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Noto Serif CJK SC");
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Fira Code");
    }
  </style>
  </head>
  <body>
    我能吞下玻璃而不伤身体.
  </body>
</html>

在这种情况下, 浏览器同时加载Noto Serif CJK SC和Fira Code. 对比上一段代码, 可以发现浏览器首先尝试了Fira Code, 然后又加载了Noto Serif CJK SC来补充Fira Code缺失的部分.

所以你看到的行为是"正确"的, 至少在CSS规则的顺序上是正确的. 这里的分歧是Appoint Font是否应该以与CSS规则相反的顺序输出规则. 我很可能被CSS的相关知识诅咒了, 因为我觉得当前的输出顺序是可以接受的, 而其他人则会认为反过来才符合逻辑.

BlackGlory commented 1 year ago

可能应该通过投票来决定输出结果的顺序. 当我们收集了足够数量的投票, 就可以决定最终的行为, 投票截止日期待定.

认为Appoint Font的输出应该与CSS规则的顺序一致的, 请在这条评论上添加👍. 认为Appoint Font的输出应该与CSS规则的顺序相反的, 请在这条评论上添加👎.

lainbo commented 1 year ago

这是因为Appoint Font的规则顺序与生成的CSS @font-face规则顺序一致.

考虑以下代码:
<!DOCTYPE html>
<html>
  <head>
  <style>
    body {
      font-family: 微软雅黑;
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Fira Code");
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Noto Serif CJK SC");
    }
  </style>
  </head>
  <body>
    我能吞下玻璃而不伤身体.
  </body>
</html>
在这种情况下, 浏览器只加载Noto Serif CJK SC, 因为它是最后一条匹配上的规则.

再看另一种顺序:
<!DOCTYPE html>
<html>
  <head>
  <style>
    body {
      font-family: 微软雅黑;
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Noto Serif CJK SC");
    }

    @font-face {
      font-family: 微软雅黑;
      src: local("Fira Code");
    }
  </style>
  </head>
  <body>
    我能吞下玻璃而不伤身体.
  </body>
</html>
在这种情况下, 浏览器同时加载Noto Serif CJK SC和Fira Code. 对比上一段代码, 可以发现浏览器首先尝试了Fira Code, 然后又加载了Noto Serif CJK SC来补充Fira Code缺失的部分.

所以你看到的行为是"正确"的, 至少在CSS规则的顺序上是正确的. 这里的分歧是Appoint Font是否应该以与CSS规则相反的顺序输出规则. 我很可能被CSS的相关知识诅咒了, 因为我觉得当前的输出顺序是可以接受的, 而其他人则会认为反过来才符合逻辑.

确实如果按照css的规则来看，这个结果是正确的，但也并不是所有人都懂css。其实可以不改变代码逻辑，在插件界面上，或者插件说明中，解释一下匹配的规则或者直接教一下如何选择，既可以消除歧义，也让大家对新功能有一个新的认识，毕竟之前只有2个下拉框，现在有这么多自定义的选项，可能大家都不太会用。当然也可以保留投票等待投票结果~

最后还是感谢大佬的开发，这个插件比任何替换字体的插件都好用！

leic4u commented 5 months ago

可能应该通过投票来决定输出结果的顺序. 当我们收集了足够数量的投票, 就可以决定最终的行为, 投票截止日期待定.

认为Appoint Font的输出应该与CSS规则的顺序一致的, 请在这条评论上添加👍. 认为Appoint Font的输出应该与CSS规则的顺序相反的, 请在这条评论上添加👎.

在不懂 css 的情况下，我的直觉让我认为是在前面的先匹配，后面的做补充。我是不是应该点 👎？

BlackGlory / appoint-font

设置多个“替换标准字体”逻辑似乎顺序不正确 #14

设置如下

期望

实际效果