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

Question

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

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

Chrome

Safari

Firefox

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

Answer 1

关闭 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 设置有关。

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

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

css

fonts

google-chrome

cross-browser