iOS 4.2+ webfont(ttf)的粗体字体重量渲染错误

Question

这个是完全指定的:font-weight:bold在iOS移动safari中指定ttf字体呈现不正确,使用iOS 4.2/4.3 Beta 3或更高版本的iphone/ipad打开演示站点:

(这是来自谷歌字体的Reenie + Beanie)

您会看到双色渲染的粗体字体.这对于中小字体大小并不重要,但对于大字体大小/放大非常重要

我的朋友会将此错误报告给苹果.但是,他能做些什么来解决这个bug？(杀掉文字调整不行)

更新:这个在iOS5中没有修复.

我知道的问题的最佳解决方案是

使用font-weight:normal(如演示中所示)
使用-webkit-text-stroke或text-shadow使其看起来"粗体"(加上仅限iPad的css - 由js添加的正文前缀,而不仅仅是媒体查询)

Answer 1

从父类h1继承相同的问题font-weight: bold;.只需用a覆盖继承的样式font-weight: normal;

这不是正确的答案或修复 - 虽然它停止双重渲染它也停止了具有font-face的粗体文本的能力.用户希望在没有这种hacky双重渲染的情况下使用带有字体的粗体文本. (3认同)
@vincicat这是正确的答案.你能标记出来吗？ (2认同)

Answer 2

似乎Mobile Safari有一种使用font-faces渲染虚假样式的错误方法.对于粗体,它将使文本和偏移加倍,并且对于大多数字体,它将被忽视,但是对于薄字体面,它看起来像双重视觉.

在你的情况下,Reenie Beanie不包括大胆的风格,如果你使用它们作为标题而不改变font-weightto normal或400它将使大胆的重量"仿造型".

请注意,在某些浏览器中使用虚假样式通常是错误的,而不仅仅是在Mobile Safari中.

解决方案1.使用适当的 `font-weight`

所以最好的解决方案是将字体权重更改为Google字体提供的字体权重,快速修复如下:

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */

另一种方案是选择从Web字体档案的字体不包括一个大胆的风格.谷歌字体中看起来很像Reenie Beanie并且"更大胆"的替代品将是例如Gochi Hand,Sunshiney或Permanent Marker.

如果你真的坚持想要一个虚假的大胆风格,你可以尝试使用薄文本阴影或文本笔划.

Answer 3

不要使用'大胆'或'粗体'标签.如果您使用特定的加权网页,则不需要它们.

我有同样的问题.当我删除任何提到的font-weight时它就消失了.

这是正确的答案!iPad 2在将正常重量的webfonts转换为"假"粗体方面存在问题.如果你试图将正常重量变成粗体(称为"假冒大胆"),那么iPad 2会出现"双重渲染"错误,它会将字体呈现在最左边和最右边的边界上.什么是粗体字,但它不填充中间的空间.因此它给出了两次渲染字体的错觉. (2认同)

Answer 4

尝试应用此css规则:

-webkit-font-smoothing: antialiased;