CSS-黑底白字，看起来更加粗体。

Question

在黑色背景上使用白色文本时，文本看起来比实际更加粗壮。这是纯CSS文本。我正在使用typekit.org字体。

有没有方法可以解决这个问题，或者这是某种反锯齿问题？

- Philip

---

不，这是一种视觉错觉。在Photoshop中打开并反转颜色，它看起来是相同的。 - Benjamin Gruenbaum

@BenjaminGruenbaum - 我刚刚翻译了，不，看起来并不一样。 - Philip

在Chrome中，我打开了这个fiddle http://jsfiddle.net/YxHkz/ 并进行了截屏，然后放大得到了这个：http://cl.ly/image/3k1U1N3Z240C 在像素级别上看，它对我来说完全一样。 - Alex Wayne

也许你正在使用的字体有一个白色边框... 你尝试过检查它吗？也许改变背景和字体颜色，看看是否有任何白色边框的痕迹... - periback2

这不是光学错觉，而是渲染问题。由于反锯齿处理导致的像素分数差异可能对某些开发人员不明显，但对于受过设计培训并在Illustrator / Photoshop和浏览器之间工作的人来说，这是一种眼部疲劳。请不要对此问题进行负面评价-它是完全合法的。 - Larry

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;
}

- Staker Humanoid

---

没问题 - 当有人试图声称这是一种视觉错觉时，这真的很恼人，因为显然不是！ - advert2013

我认为moz版本应该是-moz-osx-font-smoothing: grayscale。请参考这个回答。 - josef

在Chrome/Windows上，我仍然看到白色文字的字体比较粗。 - Ricky Boyce

Answer 2

实际上，这是一个已知的 bug：（链接）（链接）

我通过使用以下方法进行了修复：

-webkit-font-smoothing:antialiased

来源: 这篇文章 (缓存在archive.org上).

虽然有些晚，但对于一些人可能仍然有用。

只要记住这不是推荐的做法，除非你正在MacOS上使用浅色文本与深色背景。

- Armin Cifuentes

---

链接已经失效。这里是备用镜像：https://web.archive.org/web/20131019233655/http://tanookilabs.com/your-fonts-look-bad-in-chrome-heres-the-fix - geon

两个存档问题和5年后，最新的Chrome在MacOS上仍然以非常令人讨厌的方式呈现深色背景上的浅色文本。太糟糕了... - Paweł Gościcki

macOS有一个名为“词干变暗”的系统范围设置，这是苹果公司的花哨名称。转到“系统偏好设置”>“外观”，关闭“可用时使用LCD字体平滑处理”。这将关闭整个操作系统的词干变暗功能，包括Finder和Terminal.app等内置应用程序，以及Google Chrome。 - Dev

@PawełGościcki 这不同于禁用抗锯齿，它只是禁用了字幕加粗和次像素抗锯齿。我已经使用Mac多年了，关闭了“字体平滑”，看起来更好。次像素AA通常设计用于像素密度相对较低的屏幕上，在这些屏幕上，您可以看到单个像素和子像素实际上对准确性很重要。在Retina显示器和高分辨率PC监视器上，它并没有太大帮助。在这些屏幕上，灰度AA就足够了。因此，结合去除字幕加粗，禁用字体平滑是可以的。 - Dev

值得注意的是，即使我的Mac坏了（已经过保修期，所以苹果不会修理它），我不得不转而使用运行Windows的PC笔记本电脑，我仍然关闭了ClearType亚像素AA，因为颜色边缘对我的眼睛和截图来说都很讨厌。现在，在Windows上，关闭亚像素AA会更加有害，因为微软对排版和设计关注程度要低得多，所以你会遇到一些愚蠢的问题，比如字距被舍入到最近的像素，小写i的顶部点与实际的干燥部分错位等等。但支持HiDPI的应用程序可以正常工作。 - Dev

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;来减少这种效果。

- armin

Answer 4

我发现将font-smoothing: antialiased或者font-smoothing: grayscale（就像其他人提到的那样）与text-rendering: optimizeLegibility相结合，可以在浅色和深色背景下以及不同的浏览器中产生一致的效果。你需要在每个浏览器中进行适当的测试，因为不同字体的效果是不同的。有时候只设置font-smoothing就能解决问题，有时候只设置text-rendering就能解决问题，有时候需要同时使用两者。

- Gavin