Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
lainbo opened this issue Feb 19, 2023 · 4 comments
Open

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

lainbo opened this issue Feb 19, 2023 · 4 comments

Comments

@lainbo
Copy link

lainbo commented Feb 19, 2023

设置如下

image

期望

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

实际效果

页面首先使用了排在后面的思源黑体
@BlackGlory
Copy link
Owner

这是因为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
Copy link
Owner

BlackGlory commented Feb 19, 2023 •
edited
Loading

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

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

@lainbo
Copy link
Author

lainbo commented Feb 20, 2023

这是因为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个下拉框，现在有这么多自定义的选项，可能大家都不太会用。当然也可以保留投票等待投票结果~

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

@BlackGlory BlackGlory mentioned this issue Mar 2, 2023
Closed
@leic4u
Copy link

leic4u commented May 19, 2024

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@BlackGlory @leic4u @lainbo