在黑色背景上使用白色文本时,文本看起来比实际更加粗壮。这是纯CSS文本。我正在使用typekit.org字体。
有没有方法可以解决这个问题,或者这是某种反锯齿问题?
在黑色背景上使用白色文本时,文本看起来比实际更加粗壮。这是纯CSS文本。我正在使用typekit.org字体。
有没有方法可以解决这个问题,或者这是某种反锯齿问题?
你的浏览器使用的抗锯齿算法使文本加粗。这很容易验证。在IE、Safari、Firefox和Chrome中截取屏幕截图。它们都有不同的抗锯齿效果。有些会让文本看起来比其他浏览器更粗。一般来说,文本看起来越好,即黑底白字,反之则越模糊。
这里有一个完整的解释:http://www.lighterra.com/articles/macosxtextaabug/
这将关闭大多数浏览器中的抗锯齿:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
我通过使用以下方法进行了修复:
-webkit-font-smoothing:antialiased
虽然有些晚,但对于一些人可能仍然有用。
只要记住这不是推荐的做法,除非你正在MacOS上使用浅色文本与深色背景。
i
的顶部点与实际的干燥部分错位等等。但支持HiDPI的应用程序可以正常工作。 - Dev这不是光学幻觉。它是一个与操作系统和浏览器相关的问题,仍然存在于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>
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
来减少这种效果。我发现将font-smoothing: antialiased
或者font-smoothing: grayscale
(就像其他人提到的那样)与text-rendering: optimizeLegibility
相结合,可以在浅色和深色背景下以及不同的浏览器中产生一致的效果。你需要在每个浏览器中进行适当的测试,因为不同字体的效果是不同的。有时候只设置font-smoothing
就能解决问题,有时候只设置text-rendering
就能解决问题,有时候需要同时使用两者。