如何防止大字体在 Chrome (OSX) 中看起来呈锯齿状?

How to prevent large fonts from looking jagged in Chrome (OSX)?

常规字体看起来很正常,但大字体在 Chrome 中看起来参差不齐(在 Safari 或 Firefox 中则不然)。我使用的是 Macbook Pro 运行 Mojave。

示例codepen

.large {
  font-size: 300px
  font-weight: bold
}

Chrome

Safari

Firefox

我已经尝试了此 中的建议(启用字体缓存缩放和加速 2D Canvas),但问题仍然存在。

关闭 chrome://settings "Use hardware acceleration when available" OFF 为我修复了它。

起初我无法重现 jagginess/blockiness,但我意识到我是在 MacOS [High] Sierra 上查看它,而你指定了 Mojave。所以我在那里试了一下,它非常糟糕。我真的很惊讶这在测试中没有引起任何人的注意。我想很快就会有 Chrome 或 Mojave 的更新来解决这个问题。

我想这实际上与 OS 默认值的更改有关; Apple 显然 disabled sub-pixel font rendering in Mojave and passed it off as a "refinement"。子像素渲染由 GPU 处理,因此在 Chrome "fixes" 中禁用 GPU 渲染。我想您也可以使用我提到的 link 中指定的 defaults write 技术。

无论如何:这可能 不是 您可以在 CSS 代码中解决的问题,因为它与 user-local/machine 设置有关。