CSS - 黑色背景上的白色文本，看起来更大胆

Question

当在黑色背景上使用白色文本时，文本看起来比它应该看起来更胖。它带有css的纯文本。我正在使用 typekit.org 字体。

有什么办法可以解决这个问题还是某种抗锯齿问题？

Answer 1

我发现font-smoothing: antialiased 或font-smoothing: grayscale（就像其他人提到的）和text-rendering: optimizeLegibility 的组合可以在浅色和深色以及不同的浏览器中产生一致的结果。您需要在每个浏览器中进行适当的测试，因为您不会对每种字体都获得相同的结果。有时只设置font-smoothing 可以解决问题，有时只设置text-rendering 可以解决问题，有时您需要同时使用两者。

Answer 2

这不是错觉。这是一个与操作系统和浏览器相关的问题，在 2018 年仍然存在。这个小 sn-p 演示了这个问题：

<div style="background-color: #000; font-size: 16px; position: relative;">
  <div style="color: #fff;">Hello World</div>
  <div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>

如果您坐在 macOS 盒子前，您可能会注意到白色轮廓。它们是过度激励字体平滑的结果。尝试使用 -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; 来减少这种影响。

Answer 3

其实就是一个knownbug：

我可以通过以下方式解决此问题：

-webkit-font-smoothing:antialiased

来源：this article (cached on archive.org)。

有点晚了，但对某些人来说可能仍然有用。

请记住this is not recommended。除非您使用的是 MacOS，并且在深色背景上使用浅色文本。

Answer 4

文本是粗体的，因为您的浏览器中使用了抗锯齿算法。很容易验证。在 IE、Safari、Firefox 和 Chrome 中截屏。他们都以不同的方式抗锯齿。有些使文本看起来比其他文本更厚。一般来说，更好的文本看起来是黑底白字，它看起来越胖。

这里有完整的解释：http://www.lighterra.com/articles/macosxtextaabug/

这将在大多数浏览器中关闭抗锯齿功能：

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}