Git Product home page Git Product logo

Comments (4)

BlackGlory avatar BlackGlory commented on June 26, 2024 3

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

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

from appoint-font.

BlackGlory avatar BlackGlory commented on June 26, 2024

这是因为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的相关知识诅咒了, 因为我觉得当前的输出顺序是可以接受的, 而其他人则会认为反过来才符合逻辑.

from appoint-font.

lainbo avatar lainbo commented on June 26, 2024

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

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

from appoint-font.

leic4u avatar leic4u commented on June 26, 2024

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

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

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

from appoint-font.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.