不需要的加粗加在浏览器字体(Unwanted Bolding added to font in br

2019-07-03 14:38发布

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

今天,我遇到了一个办法还挺修复它,但不知道这是否是字体渲染错误?

下面我的例子示出了具有无混浊的字体,不透明度设定为0.9999999(这使得该字体看起来正常)和不透明度与8位设置(这使得它看起来像原来的双粗体显示。)

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

我难倒,为什么发生这种情况和任何见解将不胜感激。

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

Answer 1:

OSX子像素渲染抗锯齿文字比其他平台更重了很多。 这是特别真实的在深色背景浅色字体。 既然你有黑色背景上的白色文字,你几乎看到在其最极端的这种效果。

这是一个错误? 我不这么认为,这只是苹果一个蹩脚的实现子像素字体渲染的。 这只是一个猜测,但我不认为他们曾经完全与像素渲染板得到:

  • 他们从来没有使用过它在移动设备上,即使在低DPI非视网膜的iPhone / iPod的/ ipad公司 - 这就是为什么你没有看到在iOS的这种效果。

  • 他们也没有(或没有 - 没有与山狮选中此)能够在OSX子像素抗锯齿在非苹果外接显示器 - 你必须在终端运行命令来启用它。 据推测这可能是因为液晶显示器的一个很小很小的数目没有红 - 绿 - 蓝子像素顺序,这会搞乱了像素渲染。

  • 所有apple.com的有-webkit-字体平滑设置为反走样

透明度与-webkit-字体平滑:抗锯齿

,改变不透明度为.9999(或1以外的任何东西)的原因使得字体更薄是因为非不透明文本通常与简单抗锯齿,而不是子像素抗锯齿渲染。 你可以通过使用-webkit-字体平滑的效果相同:抗锯齿 (在支持它的浏览器)。

想要一些证据吗? 检查你的原始截图的这种极端特写。 注意周围的0.9999999文本缺乏彩色边缘的 - 这是该文本不使用子像素抗锯齿的标志。

无论如何,我认为你应利用超文本重住在OSX的浏览器,或使用-webkit-字体平滑:抗锯齿 (和接受Firefox将不会呈现完全相同)。 不透明度的事情是一个黑客,很可能在未来停止工作。



文章来源: Unwanted Bolding added to font in browsers
标签: css fonts