web-dev-qa-db-ja.com

iOS 4.2+ webfont（ttf）の太字のフォントウェイトレンダリングのバグ

これは非常に明確です：ttfフォントレンダリングを指定してくださいfont-weight:bold iOSモバイルサファリで誤って、iOS 4.2/4.3 Beta 3以降を搭載したiphone/ipadでデモサイトを開きます。

（これは、GoogleフォントのReenie + Beanieです）

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

画面キャプチャ

太字のフォントが二重にレンダリングされます。これは、中小のフォントサイズでは重要ではありませんが、大きなフォントサイズ/ズームインでは非常に重要です。

私の友人はこのバグをAppleに報告します。しかし、彼はバグを解決するために何ができるでしょうか？ （テキスト調整を強制終了していないOK）

アップデート：これはiOS5では修正されていません。

問題について私が知っている最善の解決策は

  1. 使用する font-weight:normal（デモに示されているように）
  2. -webkit-text-strokeまたはtext-shadowそれを「太字」に見えるようにする（プラスiPadのみcss-メディアクエリだけでなく、jsによって追加されたボディプレフィックス）
iphoneipadioscssmobile-safari
54
vincicat

親クラスからh1を継承するfont-weight: bold;で同じ問題が発生しました。継承されたスタイルをfont-weight: normal;で上書きするだけです

34
Chris Caldwell

Mobile Safariには、バグの多いレンダリング方法 faux styles with font-faces があるようです。太字の場合、テキストとオフセットが2倍になり、ほとんどのフォントでは気付かれないでしょうが、フォントフェースが薄いと、二重の視界のように見えます。

あなたの場合 Reenie Beanie は太字スタイルを含めないを行い、font-weightをnormalまたは400に変更せずに見出しとして使用している場合は、太字の重みをレンダリングします「フェイクスタイル」。

偽のスタイルの使用は一般に 一部のブラウザではバグが多い であり、Mobile Safariだけではないことに注意してください。

解決策1.適切なfont-weightを使用する

したがって、最善の解決策は、font-weightをGoogle Fontsが提供するものに変更することです。

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

解決策2.必要な太字/斜体スタイルを提供するフォントを使用する

他の解決策はdoes太字スタイルを含むWebフォントアーカイブからフォントを選択することです。 Reenie Beanieによく似ていて「太字」であるGoogleフォントの代替案は、たとえば ゴチの手 、 サンシャイン 、または パーマネントマーカー 。

解決策3.他の手段を使用して偽物を偽造する

偽の太字スタイルが本当に必要な場合は、薄い text-shadow または text stroke を使用してみてください。

27
Spoike

「bolder」または「bold」タグを使用しないでください。特定の重み付けされたWebフォントを使用している場合は必要ありません。

私も同じ問題を抱えていました。 font-weightの記述を削除したとき、それは消えました。

7
Gerry Straathof

このCSSルールを適用してみてください：

-webkit-font-smoothing: antialiased;
6
Jonathan Miller