Opacity vs. -webkit-font-smoothing：antialiased

Question

我一直在项目中使用HelveticaNeue-CondensedBold字体。这是iOS中包含的字体。当这在Chrome，Safari和Firefox中显示时，由于某种原因，我得到了不必要的粗体或双字体效果。

今天我遇到了一种方法来修复它，但不确定它是否是字体渲染中的错误？

下面的示例显示没有不透明度的字体，不透明度设置为.9999999（这使得字体看起来正常）和不透明度设置为8位（这使它看起来像原始的双粗体。）

.noOpacity {
    opacity:1;
}
.opacity7digits {
    opacity: .9999999;
}
.opacity8digits {
    opacity: .99999999;
}

enter image description here

我很难理解为什么会发生这种情况，我们将不胜感激。

Answer 1

OSX渲染亚像素抗锯齿文本比其他平台重得多。对于深色背景上的浅色字体尤其如此。由于你在黑色背景上有白色文字，你几乎可以看到这种效果。

这是一个错误吗？我不这么认为，这只是Apple的亚像素字体渲染的糟糕实现。这只是一个猜测，但我不认为他们已经完全加入了亚像素渲染：

他们从未在移动设备上使用它，即使在低DPI非视网膜iPhone / iPod / iPad上也是如此 - 这就是为什么你在iOS中没有看到这种效果的原因。
他们也没有（或没有 - 没有用Mountain Lion检查过）在非Apple外部监视器上的OSX中启用子像素抗锯齿 - 您必须在终端中运行命令才能启用它。据推测，这可能是因为非常非常少量的LCD显示器没有红绿蓝子像素顺序，这会弄乱子像素渲染。
所有apple.com都将 -webkit-font-smoothing 设置为 antialiased 。

将不透明度更改为.9999（或除1之外的任何其他内容）使字体更薄的原因是因为非不透明文本通常使用简单的抗锯齿渲染，而不是子像素抗锯齿。您可以使用 -webkit-font-smoothing：antialiased （在支持它的浏览器中）获得相同的效果。

想要一些证据吗？查看原始屏幕截图的极端特写。请注意.9999999文本周围没有彩色边缘 - 这表示文本没有使用子像素抗锯齿。

enter image description here

无论如何，我认为您应该使用OSX浏览器上的超重文本或使用 -webkit-font-smoothing：antialiased （并接受Firefox不会呈现完全相同的内容）。不透明的东西是黑客，很可能在将来停止工作。