「Lato」のフォントレンダリングでサファリが奇妙に表示され、chromeやfirefoxで表示されない

Question

Googleのウェブフォントの「Lato」フォントを使用していて、Safari以外のすべてのブラウザで表示されます。 font-weight:100;

でそれを使用して

イムは、ここでは異なるブラウザのいくつかのスクリーンショットです。非常に薄くレンダリングされている原因は何ですか？または、私がそれをサファリのためにfont-weight:300;にレンダリングするように設定できるのであれば？

アイブ氏はまた、問題のJSバイオリンを作った - http://jsfiddle.net/qLHuc/1/

FIREFOX

CHROME

SAFARI

Answer 1

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

ただし、重いフォントを使用することを検討する必要があります。 Windowsでこれをテストしましたか？それは非常に、非常に軽く見える可能性が高いです。 OSXでは、サブピクセルのアンチエイリアシングが有効になっているときにテキストが非常に重く描画されます。 Safariのスクリーンショットに表示されているものは、OSX上にない人々に見られるものに似ています。

Answer 2

まったく同じような問題が発生しました。このGoogleのフォントリンクを使用している間、私はCSS font-weight: lighter;を使用していました：

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

どういうわけか、それは100重量として表示されました！だから、私は今、明示的にfont-weight:300;を使って私が望むものを得る。私は確信していませんが、私はこれが私のシステム上にフォントを持っていることと関係していると考えています。また、私のコンピュータがシステムフォントを使用して、再度ダウンロードする前に... ...このQがなければとA、ありがとう！

Answer 3

font-weight：300のgoogleフォントを使用しようとしたときにも同様の問題に直面しました。サファリを除くすべてのブラウザで正常に動作しています。

以下のCSSプロパティを追加して解決しました。

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