'Lato'字體在Safari瀏覽器中呈現奇數，而不是在Chrome瀏覽器或Firefox中

我使用谷歌網頁字體中的'Lato'字體，並且在Safari瀏覽器以外的所有瀏覽器上顯示效果都很好。'Lato'字體在Safari瀏覽器中呈現奇數，而不是在Chrome瀏覽器或Firefox中

林在font-weight:100;

用在這裏是不同的瀏覽器的一些屏幕截圖。任何想法可能會導致它變得非常薄？或者，如果我可以將它設置爲在font-weight:300;中進行Safari瀏覽器渲染？

香港專業教育學院也對這一問題進行一個js小提琴 - http://jsfiddle.net/qLHuc/1/

FIREFOX

enter image description here

CHROME

enter image description here

SAFARI

enter image description here

2013-03-14 sam

100非常輕。你確定Safari不是唯一正確渲染它嗎？ Chrome和Firefox在300上看起來有什麼不同嗎？ – 2013-03-14 15:55:25

葉，通常我會去100個文本，但它的一個24像素的小標題，所以它dosnt真的褪色到背景。上面的圖像是1：1比例。我嘗試了300次，safari 300看起來像所有其他瀏覽器中的100次。在鉻和火狐300看起來更厚 – sam 2013-03-14 16:10:27

爲我們做一個jsfiddle。 – 2013-03-14 16:20:53

我不知道爲什麼，但Safari瀏覽器在該網頁上的小字體大小禁用子像素antialising。您可以通過應用-webkit-font-smoothing: subpixel-antialiased來修復它。看到這裏：http://jsfiddle.net/qLHuc/3/

但是，我認爲你應該考慮使用更重的字體。你在Windows上測試過這個嗎？它可能看起來非常非常輕。當啓用子像素抗鋸齒功能時，OSX會非常嚴重地渲染文本，特別是當文字背景是黑色或彩色時。您在Safari瀏覽器屏幕截圖中看到的內容類似於不在OSX上的用戶將看到的內容。

2013-03-14 18:13:12

我遇到了類似的問題，看起來完全一樣。我用的是CSS font-weight: lighter;而使用這個谷歌字體鏈接：

不知怎的，它被作爲顯示100重量！所以，我現在明確地使用font-weight:300;來得到我想要的。我不確定，但我相信這可能與我在我的系統中使用字體有關，並且Google建議我的計算機在再次下載之前使用系統字體...如果沒有此Q，就不會計算出來和A，謝謝！

2013-11-12 02:24:44 counterbeing

我也遇到過類似的問題，當我嘗試使用字體重量爲300的谷歌字體 - 它在所有瀏覽器（Safari瀏覽器除外）中工作正常。

我通過添加下面的css屬性解決了這個問題。

-webkit-font-smoothing：antialiased;

2014-10-17 07:07:39 Srinivas

回答