如何在 Chrome 中渲染原生 macOS 字体答案

【问题标题】：How to render native macOS fonts in Chrome如何在 Chrome 中渲染原生 macOS 字体
【发布时间】：2020-04-24 23:52:22
【问题描述】：

我正在尝试在 Chrome 中的 macOS 上呈现 San Francisco 字体，但它似乎在新的更新中被破坏了。

它似乎在 Safari 和 iOS Chrome 上运行良好。

我不确定正在加载什么字体，但字体粗细看起来像 100，除非改用 Roboto。

这是我的 CSS 选择器：

h1 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

如何在新版 Chrome 中渲染原生 macOS 字体？

注意：我也在运行 Catalina 10.15.4、Chrome 81.0.4044.113，并且在 Chrome 设置中设置 font-family: sans-serif; 和更改默认的 sans-serif 字体似乎工作正常。

【问题讨论】：

如果您将它与字体名称一起添加到字体堆栈的开头会发生什么？ font-family: 'San Francisco', -apple-system, system-ui...
当我尝试font-family: 'San Francisco', sans-serif; 时，它会退回到无衬线字体。

【解决方案1】：

有关在 Google Chrome/Chromium 浏览器中使用 MacOS 系统字体的主题，请参阅以下 StackOverflow 线程：How to use Apple's new San Francisco font on a webpage

不幸的是，似乎真正做到这一点的唯一方法是将其引用为 webfont。在 MacOS、iOS 或其他 Apple 平台之外的生产网站或应用程序中使用此字体违反了他们的字体许可。我尝试使用可用的解决方案在 Chromium 上渲染字体，但没有成功。

[2020 年 4 月 24 日更新] 文章引用了为 Catalina 用户调整系统字体引用的字体粗细的已知问题：https://www.coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold/

CSS Tricks 还解决了正确的系统字体渲染问题。看起来 5 月中旬的 Chrome 版本 83 有望解决这些问题：https://css-tricks.com/chrome-system-fonts-snafu/

【讨论】：

-apple-system, system-ui, BlinkMacSystemFont,.. 在最近的软件更新之前似乎可以正常工作。
@Matthew 看起来 Catalina 用户的系统字体的字体粗细/粗体存在一个已知问题。 -- coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold -- 这并不能解释字体根本不显示，但我们知道存在问题。
@Matthew 另请参阅这篇 CSS 技巧文章 - css-tricks.com/chrome-system-fonts-snafu
CSS Tricks 文章来得及时！感谢您的更新！