Chrome + 系统字体故障 | CSS-Tricks

去年年底，Chrome 中的系统字体（至少在 Mac 上，我不知道其他平台的情况）在小尺寸下显示得太细，字间距太小，在大尺寸下显示得太粗，字间距太大。所幸，这个问题已经修复了。但当它还是一个问题的时候，它是我放弃使用系统字体，并转而使用其他字体的理由。虽然性能下降，但美观度提高了。

现在又出现了一个更严重的新错误，系统字体无法加粗。这不太好，因为很多网站都使用系统字体堆栈，因为它有两个主要优点：1）它可以帮助你的网站看起来像操作系统；2）它的性能很好，因为网站不需要下载/显示自定义字体。

Jon Henshaw 写了一篇文章

… 这个问题引起了 Adam Argyle 的注意，他是 VisBug 的开发者，也是 Google 的 Chrome CSS 开发者倡导者。Argyle 创建了一个 Chromium 错误报告，但 Chromium 开发团队最终决定这不是发布版本 81 的障碍。这导致像 Coywolf 这样的网站无法对大于 16px 的字体使用粗体文字（例如，所有标题）。

这个错误不会在版本 82 中修复，因为 Chromium 团队宣布他们将跳过它，并将在 5 月中旬发布版本 83。Argyle 向所有人保证在最初的 GitHub 错误报告中，它将在版本 83 中修复。

所以我们还有大约 4 周的时间。Šime Vidas 建议暂时使用 Helvetica

body {
  font-family: -apple-system, Helvetica;
}

我想，如果使用 -apple-system，旧版本的 Chrome/macOS 仍然可以从系统字体中受益？不确定。

这引发了我一个困惑的问题。当我第一次听说使用系统字体堆栈时，有 -apple-system 和 BlinkMacSystemFont，你应该在字体堆栈中按顺序使用它们。然后出现了 -system-ui，它似乎单独工作得很好，这很好，因为它明显不那么依赖 Mac。但也有 system-ui（没有开头的短横线），它似乎做着同样的事情，我不确定哪个是正确的。现在看来计划是 ui-sans-serif 及其朋友（如 ui-serif 和 ui-monospace）。我喜欢这个想法，但我希望听到浏览器供应商关于推荐使用的明确说明。我们是否处于这样的状态？

/* Just a guess... */
body {
  font-family: 
    ui-sans-serif, 
    system-ui, 
    -system-ui, 
    -apple-system,
    BlinkMacSystemFont,
    Roboto, Helvetica, Arial, 
    sans-serif, 
    "Apple Color Emoji";
}

我还有一个观察结果… 当我试图在 Chrome 81 上复制这个问题时，一开始我认为“很奇怪，对我来说有效”，因为我尝试了默认 16px 文本的加粗。我注意到，当字体为 20px 或更大时，问题就出现了。

Bramus 提出了一个解决方法：使用 Inter。

评论