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

时间:2011-02-21 18:29:44

标签: iphone ipad ios css3 mobile-safari

这一点已经明确指出:在iOS移动版游戏中指定ttf字体呈现font-weight:bold,使用iOS 4.2 / 4.3 Beta 3或更高版本的iphone / ipad打开演示版网站:

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

http://jsbin.com/ojeqe3/16/

Screen capture

您会看到粗体字体外观双重渲染。这对于中小字体大小并不重要,但对于大字体大小/缩放来说非常重要

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

更新: 这个在iOS5中不固定

我知道的最佳解决方案是

  1. 使用font-weight:normal(如演示所示)
  2. 使用-webkit-text-strok e或text-shadow使其看起来“粗体”(加上仅限iPad的css - js添加的正文前缀,而不仅仅是媒体查询)

4 个答案:

答案 0 :(得分:34)

h1从父类继承font-weight: bold;时遇到同样的问题。只需用font-weight: normal;

覆盖继承的样式

答案 1 :(得分:26)

似乎Mobile Safari有一种错误的渲染方式faux styles with font-faces。对于粗体,它会使文本和偏移加倍,而对于大多数字体,它会被忽视,但是对于较薄的字体,它看起来就像是双重视觉。

在您的情况下,Reenie Beanie 不包含粗体,如果您将它们用作标题而未将font-weight更改为normal400它会使大胆的重量“仿造”。

请注意,使用虚假样式通常是buggy in some browsers,而不仅仅是在Mobile Safari中。

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

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

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

解决方案2.使用提供所需粗体/斜体样式的字体

另一个解决方案是从确实包含粗体样式的网络字体存档中选择一种字体。谷歌字体中的替代品看起来很像Reenie Beanie并且“更大胆”将是例如Gochi HandSunshineyPermanent Marker

解决方案3.使用其他方式伪造虚假

如果你真的坚持想要一种虚假的大胆风格,你可以尝试使用瘦text-shadowtext stroke

答案 2 :(得分:7)

请勿使用“大胆”或“粗体”标记。如果您使用特定的加权网页,则不需要它们。

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

答案 3 :(得分:6)

尝试应用此css规则:

-webkit-font-smoothing: antialiased;