铬系统字体snafu

去年年末，Chrome浏览器出现了一个bug，至少在Mac系统上（其他平台情况未知），系统字体在小尺寸下显示过细，字间距过紧；在大尺寸下则显得过粗，字间距过宽。幸运的是，该问题已修复。但问题存在期间，我因此放弃了系统字体，转而使用其他字体，虽然性能略有下降，但视觉效果有所提升。

现在出现了一个更严重的问题：系统字体无法加粗。这非常糟糕，因为许多网站都使用系统字体栈，因为它有两大优势：1）有助于网站外观与操作系统保持一致；2）性能优越，因为网站无需下载和显示自定义字体。

Jon Henshaw对此进行了报道：

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

由于Chromium团队宣布跳过82版本，并将在5月中旬发布83版本，因此该bug不会在82版本中修复。Argyle在最初的GitHub bug报告中向所有人保证，它将在83版本中修复。

所以我们还要再等大约四周。Šime Vidas建议暂时使用Helvetica字体作为临时解决方案：

<code>body {
  font-family: -apple-system, Helvetica;
}</code>

我想，由于包含了-apple-system，旧版本的Chrome/macOS仍然可能受益于系统字体？我不确定。

这让我产生了一些困惑。当我第一次听说使用系统字体栈时，有-apple-system和BlinkMacSystemFont，你应该按此顺序在字体栈中使用它们。然后出现了-system-ui，它似乎可以单独很好地工作，这很好，因为它显然不太依赖于Mac系统。但是还有system-ui（没有起始破折号），它似乎也做同样的事情，我不确定哪个是正确的。现在看来，计划是ui-sans-serif及其相关字体（如ui-serif和ui-monospace）。我喜欢这个想法，但我希望能从浏览器厂商那里得到关于推荐用法的明确说明。我们是不是正处于这样的境地？

<code>/* 只是一个猜测... */
body {
  font-family: 
    ui-sans-serif, 
    system-ui, 
    -system-ui, 
    -apple-system,
    BlinkMacSystemFont,
    Roboto, Helvetica, Arial, 
    sans-serif, 
    "Apple Color Emoji";
}</code>

我的另一个观察是……当我尝试在Chrome 81上复制这个bug时，一开始我以为“奇怪，在我的系统上工作正常”，因为我正在尝试对默认的16px文本进行加粗。我注意到，当字体大小为20px或更大时，问题就出现了：

Bramus提出了另一种解决方法：使用Inter字体。

以上是铬系统字体snafu的详细内容。更多信息请关注PHP中文网其他相关文章！