3

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

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

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

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

在此处输入图像描述

在此处输入图像描述

我很困惑为什么会发生这种情况，任何见解都将不胜感激。

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

4

1 回答 1

4

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

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

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

  • 他们也没有（或者没有 - 没有使用 Mountain Lion 进行检查）在非 Apple 外接显示器上的 OSX 中启用亚像素抗锯齿 - 您必须在终端中运行命令才能启用它。据推测，这可能是因为极少数 LCD 显示器没有红-绿-蓝亚像素顺序，这会扰乱亚像素渲染。

  • 所有 apple.com 都将-webkit-font-smoothing设置为antialiased。

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

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

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

在此处输入图像描述

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

于 2012-11-14T01:25:34.160 回答