当在黑色背景上使用白色文本时,文本看起来比它应该看起来更胖。它的纯文本与css。我正在使用typekit.org字体。
有没有办法解决这个问题,或者这是某种反走样问题?
发布于 2013-04-03 04:57:24
文本是粗体的,因为您的浏览器中使用了抗锯齿算法。这很容易验证。在IE,Safari,Firefox和Chrome中截屏。它们都以不同的方式消除锯齿。有些使文本看起来比其他的更粗。通常,文本黑底白字效果越好,反面看起来就越胖。
这里有一个完整的解释:http://www.lighterra.com/articles/macosxtextaabug/
这将关闭大多数浏览器中的抗锯齿功能:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
发布于 2014-01-14 10:04:20
我可以通过使用以下命令来修复此问题:
-webkit-font-smoothing:antialiased
来源:this article (cached on archive.org)。
有点晚了,但对某些人来说可能还是有用的。
记住this is not recommended就行了。除非你使用的是MacOS,并且在深色背景上使用浅色文本。
发布于 2018-06-21 18:40:59
这不是一种视觉错觉。这是一个与操作系统和浏览器相关的问题,在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;
来减少这种影响。
https://stackoverflow.com/questions/14477265
复制相似问题