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

实际上，这是一个已知的 错误：

我能够通过使用来解决这个问题：

-webkit-font-smoothing:antialiased

来源：这篇文章（缓存在archive.org上）。

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

请记住这是不推荐的。除非您在 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: antialiasedor的组合font-smoothing: grayscale（就像其他人提到的那样）text-rendering: optimizeLegibility可以在浅色和深色以及不同的浏览器中产生一致的结果。您需要在每个浏览器中进行适当的测试，因为您不会对每种字体都获得相同的结果。有时只有设置font-smoothing才能解决问题，有时只有设置text-rendering才能解决问题，有时您需要同时使用两者。