css - 不需要的粗体添加到浏览器中的字体

Question

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

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

我下面的示例显示了没有不透明度的字体，不透明度设置为 .9999999(这使字体看起来很正常)，不透明度设置为 8 位数字(这使它看起来像原来的双粗体。)

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

我很难理解为什么会这样，任何见解都将不胜感激。

http://jsfiddle.net/J75gW/4/

Answer 1

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

这是一个错误吗？我不这么认为，这只是Apple对亚像素字体渲染的蹩脚实现。这只是一个猜测，但我认为他们还没有完全接受子像素渲染:

• 他们从未在移动设备上使用过它，即使是在低 DPI 非视网膜 iPhone/iPods/iPad 上也是如此 - 这就是您在 iOS 中看不到这种效果的原因。

• 他们也没有(或者没有 - 没有与 Mountain Lion 核对过)在非 Apple 外部显示器上的 OSX 中启用子像素抗锯齿 - 您必须在终端中运行命令才能启用它.据推测，这可能是因为极少数 LCD 显示器没有红-绿-蓝子像素顺序，这会弄乱子像素渲染。

• 所有 apple.com 都已将 -webkit-font-smoothing 设置为抗锯齿。

不透明度与 -webkit-font-smoothing:抗锯齿

将不透明度更改为 .9999(或除 1 以外的任何值)会使字体变细的原因是，非不透明文本通常使用简单的抗锯齿而不是亚像素抗锯齿来呈现。您可以通过使用 -webkit-font-smoothing: antialiased 获得相同的效果(在支持它的浏览器中)。

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

无论如何，我认为您应该忍受 OSX 浏览器上的超重文本或使用 -webkit-font-smoothing: antialiased(并接受 Firefox 不会呈现完全相同的情况)。不透明度是一个 hack，将来很可能会停止工作。