50

私の最後のウェブサイトでは、フォントスムージングなどに触れなくても、テキストはクロムとファイアフォックスで自然に完璧です.
しかし、Mac / Safari 7 では、テキストはきれいに表示されますが、すぐに細くなります (細すぎる / 読みにくくなります)。 ここに画像の説明を入力 ここに画像の説明を入力

いくつかの調査 [ 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;

私のウェブサイトをすべてのブラウザで一貫させるため。
font-face Avenir Std Roman を使用しています。

そのSafariの問題に対するいくつかの説明は?より良い解決策はありますか?私のフォントが問題の一部でしょうか?

ありがとう。

4

5 に答える 5

80

だから私は適用に関する私の問題を修正しました:

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

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

于 2014-02-11T11:51:09.860 に答える
10

両方を試す

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
于 2015-08-22T07:03:11.723 に答える
2

を使用-webkit-font-smoothing: subpixel-antialiasedすると少しはうまくいきましたが、それでも Safari、Chrome、および Firefox には大きな違いがありました。Safari でフォントを太くしようとしてもうまくいかないことがわかったので、代わりに他のブラウザーでフォントを軽くしてから、少し太めのフォントの太さを使用しました。私にとってブラウザ間でフォントの太さを正規化することになったのはこれです:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
于 2017-08-29T19:55:54.523 に答える