css - Chrome 中的“system-ui”CSS 字体系列无法识别超过 macOS 上某些字体大小的字体粗细

问题描述

我最近买了一台新的 2019 iMac，27 英寸屏幕，配备 Retina 5K 显示屏。它旨在取代我在 2013 年底推出的旧型号，该型号长期以来一直是我的主力军。

在启动并运行 Chrome 后不久，我注意到网站上的某些标题比我记忆中的要粗，并且能够弄清楚它发生在使用系统字体堆栈变体的网站上。具体来说，如果font-family设置为BlinkMacSystemFontor system-ui，标题通常不再以正确的字体粗细呈现。一切看起来好像字体粗细设置为normal.

更奇怪的是，通过在开发工具（Codepen 链接）中的一些摆弄，我发现这只发生在字体大小等于或大于 20px 的情况下，因此存在某种影响问题的大小依赖性。它似乎也与字体平滑有关，因为如果我设置 font-weight 再次开始工作-webkit-font-smoothing: none;，但它看起来非常糟糕。请参阅下面的屏幕截图，了解我的意思。

我对此完全感到困惑。我尝试从Apple Developer resources安装 San Francisco 。我去了字体书-> 文件-> 恢复标准字体，但没有用。我还尝试在“设置”->“常规”中选中和取消选中“可用时使用字体平滑”。

如果我打开 Chrome 的开发工具并转到 Computer -> Rendered Fonts，它会.SF NS显示，我认为这意味着它可以找到 San Francisco，但显然在 20 像素以上停止工作。

这只会发生在 Chrome 上，并且只会发生在我较新的 iMac 上。我的旧款 27 英寸 iMac 没有这个显示问题，我的任何其他配备 Catalina 和 Chrome 的 Apple 设备都没有。那么也许它与5k显示器有关？不清楚。

我的 Chrome 版本是最新的，在撰写本文时它是版本 81.0.4044.113。

编辑：

一些额外的挖掘：

如果我为手动指定“SF Pro Text”或“SF Pro Display” font-family，它会以正确的权重正确呈现。
这个 Chromium 错误报告似乎非常相关，它链接到Apple 开发人员指南的一部分，该指南可以解释为什么它会在 20 像素处发生变化——因为那是系统尝试使用 SF Pro Display 而不是 SF Pro Text 的时候。也许这表明这些字体的内部安装版本存在问题：

对 19 点或更小的文本使用 SF Pro Text，对 20 点或更大的文本使用 SF Pro Display。当您将 San Francisco 用于按钮和标签等标准控件中的文本时，macOS 会根据磅值和用户的可访问性设置自动应用最合适的变体。

一份相关的铬错误报告，描述了与字距调整/跟踪相关的问题。它已关闭，并且没有提及字体粗细，但似乎根本原因可能是相同的。

标签： cssmacosgoogle-chromefonts

css - Chrome 中的“system-ui”CSS 字体系列无法识别超过 macOS 上某些字体大小的字体粗细

问题描述

解决方案

推荐阅读