web-dev-qa-db-ja.com

「Lato」フォントは、ChromeやFirefoxではなく、Safariで奇妙にレンダリングされます

私はグーグルウェブフォントの「ラト」フォントを使用しており、サファリを除くすべてのブラウザで問題なく表示されます。

font-weight:100;で使用しています

これは、さまざまなブラウザのスクリーンショットです。何が原因で非常に薄くなるのでしょうか？または、サファリ専用にfont-weight:300;でレンダリングするように設定できる方法がある場合はどうなりますか？

私はまた、問題のjsフィドルを作成しました http://jsfiddle.net/qLHuc/1/

[〜＃〜] Firefox [〜＃〜]

enter image description here

[〜＃〜] chrome [〜＃〜]

enter image description here

[〜＃〜] safari [〜＃〜]

enter image description here

cssfontscross-browsertext-rendering
16
sam

理由はわかりませんが、Safariはそのページの小さいフォントサイズでサブピクセルアンチエイリアスを無効にしています。 -webkit-font-smoothing: subpixel-antialiasedを適用することで修正できます。ここを参照してください： http://jsfiddle.net/qLHuc/3/

ただし、より重いフォントの使用を検討する必要があると思います。これをWindowsでテストしましたか？それはおそらく非常に、非常に軽く見えるでしょう。 OSXは、サブピクセルアンチエイリアスが有効になっている場合、特にテキストが暗い背景や色付きの背景にある場合に、テキストを非常に重くレンダリングします。 Safariのスクリーンショットに表示されるものは、OSXを使用していない人に表示されるものと似ています。

16
Chris Herbert

Font-weight：300でgoogleフォントを使おうとしたときにも、同様の問題に直面しました。これは、Safariを除くすべてのブラウザで正常に機能します。

以下のcssプロパティを追加することでこれを解決しました。

-webkit-font-smoothing：アンチエイリアス;

2
Srinivas

私はまったく同じように見える同様の問題に遭遇していました。このグーグルフォントリンクを使用している間、私はCSS font-weight: lighter;を使用していました：

http://fonts.googleapis.com/css?family=Lato:300,4

どういうわけか100重量で表示されていました！そのため、今では明示的にfont-weight:300;を使用して必要なものを取得しています。よくわかりませんが、これはシステムにフォントがあることと関係があると思います。Googleは、コンピュータがシステムフォントを使用してから、再度ダウンロードすることを提案しています...このQがないと理解できなかったでしょう。とA、ありがとう！

0
counterbeing