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

Question

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

有没有办法解决这个问题，还是某种抗锯齿问题？

Answer 1

由于浏览器中使用了抗锯齿算法，因此文本为粗体。它很容易验证。在IE，Safari，Firefox和Chrome中获取屏幕抓图。他们所有的反别名都不同。有些使文本看起来比其他文本更厚。一般来说，较好的文字看起来是白色的黑色，它看起来更胖。

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

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

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

Answer 2

实际上，它是known bug：

我能够通过使用：

来解决这个问题

-webkit-font-smoothing:antialiased

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

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

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

Answer 3

这不是错觉。这是与操作系统和浏览器相关的问题，该问题在2018年仍然存在。此小片段演示了该问题：

<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 4

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

Answer 5

我认为这是一种视错觉，css是由你定义的，如果你没有在css中放置使文本变粗的规则，那么它就不能大胆。