web-dev-qa-db-ja.com

Mac / Safariでフォントの太さが軽くなる

私の最後のウェブサイトでは、テキストはchromeとfirefoxでフォントスムージングなどに触れることなく自然に完璧です。
ただし、Mac/Safari 7では、テキストは適切に表示され、すぐに薄くなります（非常に薄くなります/読みやすくない）。 enter image description hereenter image description here

いくつかの調査を行った後[cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
およびいくつかのテスト

-webkit-font-smoothing

Safariは最初にテキストを表示するように見えます：

-webkit-font-smoothing: subpixel-antialiased;

次に、ちらつき効果を取得した直後、フォントを次のように変更します：

-webkit-font-smoothing: antialiased;

だから、私は強制する以外に選択肢がなかったように思えます

-webkit-font-smoothing: subpixel-antialiased;

すべてのブラウザでウェブサイトの一貫性を保つため。
私はフォントフェイスAvenir Std Romanを使用しています。

そのSafariの問題の説明は？より良い解決策はありますか？私のフォントは問題の一部でしょうか？

ありがとう。

cssfontssafarifont-smoothing
48
migswd

それで、私は適用の問題を修正しました：

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

現在、私のフォントはすべてのブラウザで一貫しています。

76
migswd

両方試してください

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
9
Mihir ajagia

これを使用するだけで： link href = "https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel = "stylesheet 」

代わりに： link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet"

この方法で問題が解決しました！

3
Martin Jutras

-webkit-font-smoothing: subpixel-antialiasedの使用は少しうまくいきましたが、Safari、Chrome、Firefoxの間にはまだ違いが大きすぎました。 Safariでフォントを太くしようとしてもうまくいかないことに気づいたので、代わりに他のブラウザでフォントを軽くしてから、少し太いフォントを使用しました。私のためにブラウザ全体でフォントの重みを正規化したのはこれです：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
1
Gavin

これを試して：

transform: translateZ(0.1px);

Mac上のWebkitブラウザーは、2dと3dのテキスト要素のアンチエイリアシングに関する問題を知っています。通常、要素に3Dプロパティを与えることで問題が解決します。

0
Rauli Rajande