web-dev-qa-db-ja.com

iOS Safariが余分な文字間隔を追加するのはなぜですか？

モバイル（iOS 8）SafariでGoogleフォントのWebレンダリングのバグを見つけたと思います。 Mobile Safariは、Google Fontsを使用するすべてのテキストにわずかな文字間隔を追加するか、別のフォントを使用するようです。どのGoogle Fontを試しても問題ありません（Open Sans）。最新のすべてのブラウザーで正しくレンダリングされます。テスト済みのAndroid、FF、Chrome、Safari。

このページをiOSデバイスに読み込んで、意味を確認してください。コードとスクリーンショットもご覧ください。ライブレビューについては、次のリンクを参照してください。 https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
  <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2>
  <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2>
</body>

</html>

enter image description here

htmlioscsssafari
26
Andreas

私はこの質問で解決策を見つけました： iOS 4.2+ webfont（ttf）の太字のフォント重量レンダリングのバグ

Font-weightを設定しないと、Mobile Safariはフォントの重みを偽装してレンダリングします（たとえば、font-weight: 400またはfont-weight: normal）モバイルサファリで正しくレンダリングするには、CSSフォントの太さを特に設定する必要があります。

これが解決策です。

h2 {
  font-weight: 400;
}
45
Andreas

Google Web Fontsはデフォルトで通常のウェイト（400）のみをエクスポートすることに注意してください。これにより、Mobile Safari（および他のブラウザー）が太字を強制的に強制される可能性があります。

太字の太さを明示的にエクスポートするには、Google Web Fontのフォント選択ペインで[カスタマイズ]を選択し、必要な各太さを手動で確認し、更新された埋め込みコードを使用します。

([Screenshot: Google Fonts customise pane） ] 1

13
Daniel Jones