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

这是一个很明确的规定:在iOS移动Safari浏览器中指定ttf字体渲染font-weight:bold不正确,使用iOS 4.2 / 4.3 Beta 3或更高版本的iphone / ipad打开演示网站:

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

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

屏幕截图

你看到粗体字看起来双重渲染 。 这对于中小字号不是很重要,但是对于大字号/放大而言非常重要

我的朋友会向苹果报告这个错误。 但是,他可以做什么来解决这个错误? (杀死文本 – 调整不好

更新:这一个不是在iOS5中修复的。

我所知道的最好的解决scheme将是

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

h1inheritancefont-weight: bold;相同的问题font-weight: bold; 从一个父类。 只需用font-weight: normal;覆盖inheritance的样式font-weight: normal;

看来,移动Safari浏览器有一个错误的方式呈现与font-faces的人造风格 。 对于粗体文字和偏移量,文字和偏移量会加倍,大多数字体都会被忽略,但是如果字体很细,就会看起来像是双重视觉。

在你的情况下, Reenie豆豆不包括大胆的风格 ,如果你使用它们作为标题,而不改变font-weightnormal400它会使大胆的重量“人造风格”。

请注意, 在一些浏览器中使用人造风格通常是buggy,而不是在Mobile Safari中。

解决scheme1.使用适当的font-weight

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

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

解决scheme2.使用提供您想要的粗体/斜体风格的字体

另一种解决scheme是从包含粗体样式的Web字体存档中选取一种字体。 谷歌字体中的替代品看起来很像Reenie Beanie,而且比较“大胆”,例如Gochi Hand , Sunshiney或Permanent Marker 。

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

如果你真的想要一个模仿大胆的风格,你可以尝试使用一个薄的文字阴影或文字描边 。

不要使用“大胆”或“粗体”标签。 如果您使用特定的加权webfont,则不需要它们。

我有同样的问题。 当我删除任何字体重量的时候,它就消失了。

尝试应用这个CSS规则:

 -webkit-font-smoothing: antialiased;