Słabe renderowanie czcionek w QuickSand (czcionka Google) w Chrome i IE

Question

Staram się uzyskać spójne i ładne czcionki we wszystkich przeglądarkach za pomocą czcionki Google QuickSand. Chrome i IE pokazują bardzo postrzępione i pikselizowane krawędzie, zwłaszcza przy mniejszych rozmiarach czcionek. Powiększanie przeglądarki często powoduje znikanie artefaktów.

Oto porównanie screenshot problemu z Firefox, Chrome, & Internet Explorer: https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png

Oto jsfiddle odtwarzając problem dla eksperymentów:

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active { 
color: white; 
display: inline-block; 
padding: 19px 10px; 
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif; 
text-transform: uppercase;} 

Answer 1

Problem wynikał z tego, że czcionki Google nie implementują wszystkich typów plików czcionek. Rozwiązaniem było użycie generatora czcionek wiewiórki fontów do generowania brakujących typów plików i hostowania ich osobiście.

Answer 2

Ty nie można zrobić zbyt wiele przy renderowaniu czcionek w przeglądarkach. Możesz spróbować z czcionką, jeśli może to poprawić, ale w przeciwnym razie nie można tego zmienić.

Dla WebKit (Chrome, Safari) można dodać:

-webkit-text-stroke: 1px black; 

W celu zamaskowania problemu trochę ale tekst będzie giełdowy.