如何在 Chrome 中呈现本机 macOS 字体

Question

我正在尝试在 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，Chrome81.0.4044.113，并且设置font-family: sans-serif;并更改了默认的sans-serif字体Chrome 设置似乎工作正常。

Answer 1

有关在 Google Chrome/Chromium 浏览器中使用 MacOS 系统字体的主题，请参阅以下 Whosebug 线程：

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

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

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

How to render native macOS fonts in Chrome