iOS 4.2+ webfont (ttf) 的粗體字體粗細渲染錯誤

Question

這個很具體：在iOS mobile safari上指定ttf字體渲染font-weight:bold不正確，用iphone/ipad和iOS 4.2/4.3 Beta 3或更高版本打開演示站點：

（這是來自谷歌字體的 Reenie+Beanie）

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

屏幕截圖

您會看到粗體看起來是雙重渲染的。 這對於中小字體大小並不重要，但對於大字體大小/放大非常重要

我的朋友會向蘋果報告這個錯誤。 然而，他能做些什么來解決這個錯誤？ （殺死文字調整不行）

更新：這個在 iOS5 中沒有修復。

我知道這個問題的最佳解決方案是

1. 使用font-weight:normal （如demo所示）
2. 使用-webkit-text-strok e 或text-shadow使其看起來“粗體”（加上僅限 iPad 的 css - 由 js 添加的正文前綴，不僅是媒體查詢）

Answer 1

繼承font-weight: bold;的h1有同樣的問題font-weight: bold; 從父類。 只需用font-weight: normal;覆蓋繼承的樣式font-weight: normal;

Answer 2

似乎 Mobile Safari 使用 font-faces渲染人造樣式的方式有問題。 對於粗體，它將使文本和偏移量加倍，並且對於大多數字體它會被忽視，但是對於薄字體，它看起來像雙重視覺。

在您的情況下， Reenie Beanie不包括粗體樣式，如果您將它們用作標題而不將font-weight更改為normal或400 ，它將呈現粗體粗細“仿樣式”。

請注意， 在某些瀏覽器中使用人造樣式通常是有問題的，而不僅僅是在 Mobile Safari 中。

解決方案 1. 使用適當的font-weight

所以最好的解決方案是將字體粗細更改為 Google Fonts 提供的字體粗細，快速修復如下：

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

解決方案 2. 使用能夠提供您想要的粗體/斜體樣式的字體

另一種方案是選擇從Web字體檔案的字體，它包括一個大膽的風格。 Google Fonts 中看起來很像 Reenie Beanie 並且“更大膽”的替代品將是例如Gochi Hand 、 Sunshiney或Permanent Marker 。

解決方案 3. 使用其他方式偽造假貨

如果你真的堅持想要一種人造粗體風格，你可以嘗試使用細的text-shadow或text stroke 。

Answer 3

嘗試應用此 css 規則：

-webkit-font-smoothing: antialiased;

Answer 4

不要使用“粗體”或“粗體”標簽。 如果您使用特定的加權網絡字體，則不需要它們。

我有同樣的問題。 當我刪除任何對字體粗細的提​​及時，它就消失了。