Renderowanie czcionek "Lato" w safari, nie w chrome, czy firefox

Question

Używam czcionek "Lato" z czcionek google web i wyświetlanie ich dobrze we wszystkich przeglądarkach oprócz safari.

Im używając go w font-weight:100;

oto kilka zrzutów ekranu z różnymi przeglądarkami. Każdy pomysł, co może być przyczyną tego, że jest bardzo cienki? Lub jeśli jest sposób, w jaki mogę ustawić go do renderowania w font-weight:300; tylko na safari?

Ive wykonane również skrzypce js problemu - http://jsfiddle.net/qLHuc/1/

Firefox

CHROME

SAFARI

Answer 1

nie jestem pewien dlaczego, ale Safari jest wyłączenie subpikseli antialising przy małych rozmiarach czcionek na tej stronie. Możesz to naprawić, stosując -webkit-font-smoothing: subpixel-antialiased. Zobacz tutaj: http://jsfiddle.net/qLHuc/3/

Myślę jednak, że powinieneś rozważyć użycie cięższej czcionki. Czy testowałeś to w systemie Windows? Prawdopodobnie będzie wyglądać bardzo, bardzo lekko. OSX renderuje tekst bardzo mocno, gdy włączone jest wygaszanie subpikseli, a szczególnie mocno, gdy tekst jest na ciemnym lub kolorowym tle. To, co widzisz na zrzucie Safari, jest podobne do tego, co zobaczą ludzie spoza OSX.

Answer 2

Występowałem z podobnym problemem, który wyglądał dokładnie tak samo. I był przy użyciu CSS font-weight: lighter; podczas korzystania z tego linku google czcionki:

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

Jakoś było wyświetlane jako 100 wagi! Tak więc teraz jawnie używam font-weight:300;, aby uzyskać to, co chcę. Nie jestem pewien, ale wierzę, że to prawdopodobnie ma coś wspólnego ze mną, że mam czcionkę w moim systemie, a Google sugeruje, że mój komputer używa czcionki systemowej przed jej ponownym pobraniem ... Nie odkryłbym tego bez Q i A, dzięki!

Answer 3

Mam także do czynienia z podobnym problemem, kiedy próbowałem użyć czcionek google z czcionką: 300 - działa dobrze we wszystkich przeglądarkach z wyjątkiem safari.

Rozwiązałem to, dodając poniżej właściwość css.

-webkit-wygładzanie czcionek: antyaliasing;