我最近购买了一台新的 2019 年 iMac，27 英寸屏幕，配备 Retina 5K 显示屏。它的目的是取代我 2013 年末的旧型号，该型号长期以来一直是我的主力。
在启动并运行 Chrome 后不久，我注意到网站上的某些标题比我内存中的更粗体，并且能够发现使用系统字体堆栈变体的网站会发生这种情况。具体来说，如果将 font-family 设置为 BlinkMacSystemFont 或 system-ui，标题通常不再以正确的字体粗细呈现。一切看起来都好像字体粗细设置为正常。
更奇怪的是，通过在开发工具 ( Codepen link ) 中进行一些摆弄，我发现这只发生在字体大小等于或大于 20px 的情况下，因此存在某种大小依赖性会影响该问题。它似乎也与字体平滑有关，因为如果我设置 -webkit-font-smoothing: none;，font-weight 会再次开始工作，但看起来绝对很糟糕。请参阅下面的屏幕截图来了解我的意思。
我对此完全困惑。我尝试从 Apple Developer resources 安装旧金山。我已经转到“字体簿”->"file"->“恢复标准字体”，但这不起作用。我还尝试在“设置”->“常规”中选中和取消选中“可用时使用字体平滑”。
如果我打开 Chrome 的开发工具并转到计算机 -> 渲染字体，它会显示 .SF NS，我认为这意味着它发现旧金山很好，但显然在超过 20 像素时停止工作。
这只发生在 Chrome 上，并且只发生在我较新的 iMac 上。我的旧 27 英寸 iMac 或任何其他配备 Catalina 和 Chrome 的 Apple 设备都没有此显示问题。那么这可能与 5k 显示屏有关吗？不清楚。
我的 Chrome 版本是最新版本，截至撰写本文时，版本为 81.0.4044.113。
编辑:
一些额外的挖掘:
- 如果我为
字体系列手动指定“SF Pro Text”或“SF Pro Display”，它会以正确的粗细正确呈现。 - This Chromium bug report似乎非常相关，链接到 Apple's developer guidelines 的一部分这可以解释为什么它的变化恰好是 20px - 因为此时系统尝试使用 SF Pro Display 而不是 SF Pro Text。也许这表明这些字体的内部安装版本存在问题:
Use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. When you use San Francisco for text in standard controls like buttons and labels, macOS automatically applies the most appropriate variant based on the point size and the user’s accessibility settings.
- 一个related chromium bug report它描述了与字距调整/跟踪相关的问题。它已关闭，并且没有提及字体粗细，但似乎根本原因可能是相同的。
最佳答案
找到了正确的 chromium bug。截至撰写本文时，仍然开放，但希望很快就能修复: Issue 1057654
关于css - "system-ui"Chrome 中的 CSS 字体系列无法识别 macOS 上高于特定字体大小的字体粗细，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61256915/