问CSS -黑色背景上的白色文本，看起来更粗体

EN

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

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

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

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

实际上，它是一个known bug

我可以通过使用以下命令来修复此问题：

-webkit-font-smoothing:antialiased

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

有点晚了，但对某些人来说可能还是有用的。

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

这不是一种视觉错觉。这是一个与操作系统和浏览器相关的问题，在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;来减少这种影响。