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

iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

提问by vincicat

This one is quite specify: specify ttf font rendering font-weight:boldincorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:

这个很具体：font-weight:bold在iOS mobile safari上指定ttf字体渲染不正确，用iphone/ipad打开演示站点，iOS 4.2/4.3 Beta 3或更高版本：

(this is Reenie+Beanie from google fonts)

（这是来自谷歌字体的 Reenie+Beanie）

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

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

Screen capture

屏幕截图

You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in

您会看到粗体看起来是双重渲染的。这对于中小字体大小并不重要，但对于大字体大小/放大非常重要

My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is notOK)

我的朋友会向苹果报告这个错误。然而，他能做些什么来解决这个错误？（杀死文字调整不行）

Update: This one is not fixedin iOS5.

更新：这个在 iOS5 中没有修复。

The best solution I know for the problem will be

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

1. Use font-weight:normal(as shown in demo)
2. Use either -webkit-text-stroke or text-shadowto make it look "bold" (plus iPad only css - body prefix added by js, not only media query)

1. 使用font-weight:normal（如demo所示）
2. 使用-webkit-text-stroke 或text-shadow使其看起来“粗体”（加上仅限 iPad 的 css - 由 js 添加的正文前缀，不仅是媒体查询）

回答by Chris Caldwell

Had the same issue with an h1inheriting the font-weight: bold;from a parent class. Just overwrite the inherited style with a font-weight: normal;

从父类h1继承有同样的问题font-weight: bold;。只需用一个覆盖继承的样式font-weight: normal;

回答by Spoike

It seems that Mobile Safari has a buggy way of rendering faux styleswith font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.

似乎 Mobile Safari使用 font-faces渲染人造样式的方式有问题。对于粗体，它将使文本和偏移量加倍，并且对于大多数字体它会被忽视，但是对于薄字体，它看起来像双重视觉。

In your case the Reenie Beaniedoes not include a bold style, and if you're using them as heading without changing the font-weightto normalor 400it will render the bold weight "faux styled".

在您的情况下，Reenie Beanie不包括粗体样式，如果您将它们用作标题而不更改font-weightto normal，400否则它将呈现粗体重量“仿样式”。

Please do note that using faux styles is generally buggy in some browsersand not only in Mobile Safari.

请注意，在某些浏览器中使用人造样式通常是有问题的，而不仅仅是在 Mobile Safari 中。

Solution 1. Use the appropriate font-weight

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

So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:

所以最好的解决方案是将字体粗细更改为 Google Fonts 提供的字体粗细，快速修复如下：

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

Solution 2. Use a font that does provide the bold/italic style that you want

解决方案 2. 使用能够提供您想要的粗体/斜体样式的字体

The other solution is to pick a font from a web font archive that doesinclude a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.

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

Solution 3. Fake the faux using other means

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

If you really insist on wanting a faux bold style you can try using a thin text-shadowor text stroke.

如果你真的坚持想要一种人造粗体风格，你可以尝试使用细的text-shadow或text stroke。

回答by Gerry Straathof

don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.

不要使用“粗体”或“粗体”标签。如果您使用特定的加权网络字体，则不需要它们。

I had the same problem. It went away when I removed any mention of font-weight.

我有同样的问题。当我删除任何对字体粗细的提​​及时，它就消失了。

回答by Jonathan Miller

Try applying this css rule:

尝试应用此 css 规则：

-webkit-font-smoothing: antialiased;