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将是
- 使用
font-weight:normal
(如演示中所示) - 使用
-webkit-text-strok
e或text-shadow
使其看起来像“大胆”(加上iPad只有css – 由js添加的正文前缀,而不仅仅是媒体查询)
与h1
inheritancefont-weight: bold;
相同的问题font-weight: bold;
从一个父类。 只需用font-weight: normal;
覆盖inheritance的样式font-weight: normal;
看来,移动Safari浏览器有一个错误的方式呈现与font-faces的人造风格 。 对于粗体文字和偏移量,文字和偏移量会加倍,大多数字体都会被忽略,但是如果字体很细,就会看起来像是双重视觉。
在你的情况下, Reenie豆豆不包括大胆的风格 ,如果你使用它们作为标题,而不改变font-weight
为normal
或400
它会使大胆的重量“人造风格”。
请注意, 在一些浏览器中使用人造风格通常是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;