问题描述
我一直在项目中使用HelveticaNeue-CondensedBold字体。这是iOS中包含的字体。当这显示在Chrome，Safari和Firefox中时，由于某种原因，我得到了不必要的加粗或双字体效果。
今天我遇到了一种修复它的方法，但不确定是否是字体渲染中的错误？
下面的示例显示了没有不透明度的字体，opacity设置为.9999999（这使得字体看起来正常）和不透明度设置为8位数字（这使它看起来像原来的双粗体。）
.noOpacity {
不透明度：1;
}
.opacity7digits {
opacity：.9999999;
}
.opacity8digits {
opacity：.99999999;
}
我很抱歉，为什么会发生这种情况，任何洞察力都会感激。
$ bXb
OSX渲染子像素抗锯齿文本比其他平台重。这在深色背景上的浅色字体尤其如此。由于您在黑色背景上有白色文本，因此您可以非常看到这种效果。
这是一个错误吗？我不这么认为，这只是苹果子像素字体渲染的一个糟糕的实现。这只是一个猜测，但我不认为他们已经完全成为子像素渲染：
-
他们从来没有在移动设备上使用它，甚至在低DPI非视网膜iPhone / iPod / iPad上 - 这就是为什么你在iOS中看不到此效果的原因。
- p>他们也没有（或没有 - 没有检查这与山狮）在非Apple外部监视器上启用子像素抗锯齿在OSX - 你必须在终端中运行一个命令来启用它。推测这可能是因为非常非常少量的LCD显示器没有红 - 绿 - 蓝子像素顺序，这会混乱子像素渲染。
- p>所有apple.com已将 -webkit-font-smoothing 设置为抗锯齿。
不透明度vs -webkit-font-smoothing：抗锯齿
将不透明度更改为.9999 ）使字体更薄是因为非不透明文本通常使用简单的抗锯齿，而不是子像素抗锯齿呈现。您可以使用 -webkit-font-smoothing：antialiased （在支持它的浏览器中）获得相同的效果。
？看看这个极端特写的原始截图。请注意，.9999999文本周围没有彩色边框 - 这表示文字未使用子像素抗锯齿。
无论如何，我想你应该用超重文本OSX浏览器或使用-webkit-font-smoothing：antialiased （并接受Firefox不会渲染完全相同）。不透明的东西是一个黑客，可以很好地停止在未来的工作。
I have been using HelveticaNeue-CondensedBold font in a project. This is a font included in iOS. When this is displayed in Chrome, Safari and Firefox I am getting an unnecessary bolding or double font effect for some reason.
Today I came across a way to kinda fix it, but wasn't sure if it was a bug in font rendering?
My example below shows the font with no opacity, opacity set at .9999999 (which makes the font look normal) and opacity set with 8 digits (which makes it look like the original double bolded.)
.noOpacity {
opacity:1;
}
.opacity7digits {
opacity: .9999999;
}
.opacity8digits {
opacity: .99999999;
}
I am stumped to why this is happening and any insight would be appreciated.
OSX renders subpixel antialiased text a lot heavier than other platforms. This is particularly true of light-colored fonts on a dark background. Since you have white text on a black background, you're pretty much seeing this effect at its most extreme.
Is this a bug? I don't think so, it's just a crappy implementation of subpixel font rendering by Apple. It's just a guess, but I don't think they've ever fully gotten on board with subpixel rendering:
They never used it on their mobile devices, even on the low-DPI non-retina iPhones/iPods/iPads - that's why you don't see this effect in iOS.
They also don't (or didn't - haven't checked this with Mountain Lion) enable subpixel antialiasing in OSX on non-Apple external monitors - you have to run a command in the terminal to enable it. Presumably this could be because a very, very small number of LCD monitors don't have the red-green-blue subpixel order, which would mess up subpixel rendering.
All of apple.com has -webkit-font-smoothing set to antialiased.
Opacity vs. -webkit-font-smoothing: antialiased
The reason that changing the opacity to .9999 (or anything other than 1) makes the fonts thinner is because non-opaque text is generally rendered with simple antialiasing, NOT subpixel antialiasing. You can get the same effect by using -webkit-font-smoothing: antialiased (in the browsers that support it).
Want some proof? Check out this extreme close-up of your original screenshot. Note the lack of colored fringing around the .9999999 text - that's a sign that the text is not using sub pixel antialiasing.
Anyway, I think you should either live with the ultra-heavy text on OSX browsers or use -webkit-font-smoothing: antialiased (and accept that Firefox will not render exactly the same). The opacity thing is a hack and could very well stop working in the future.
这篇关于在浏览器中将不必要的粗体添加到字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！