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

Question

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

示例 codepen

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

Chrome

Safari

火狐

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

Answer 1

关闭 chrome://settings“在可用时使用硬件加速”OFF 为我修复了它。

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

我想这实际上与操作系统默认设置的更改有关；显然是苹果disabled sub-pixel font rendering in Mojave and passed it off as a "refinement" .子像素渲染由 GPU 处理，因此在 Chrome 中禁用 GPU 渲染可以“修复”它。我想您也可以使用我提到的链接中指定的 defaults write 技术。

无论如何:这可能不是您可以在 CSS 代码中解决的问题，因为它与用户本地/机器设置有关。