Używanie ikony czcionki (Font Awesome) wygląda na nieco rozmytą i zbyt odważną

Question

Używam czcionki Awesome do tworzenia ikon na mojej stronie, a gdy wyglądają fantastycznie na iPodzie Touch z wyświetlaczem Retina, na moim komputerze iMac wyglądają nieco rozmyte i mniej zdefiniowane.

Oto obraz wykazać:

Jak widać, czcionka wygląda naprawdę ładnie i crispt na wyświetlacz Retina iPod Touch, ale na iMac, to trochę brzydko.

Co to powoduje? Czy to ma związek z anty aliasingiem? Czy mogę coś z tym zrobić?

Answer 1

Tego typu problemy są prawdopodobnie związane z wygładzaniem lub podpowiedziami. Czcionki muszą być wyrównane na jakiejś siatce, jeśli mają nadzieję wyglądać dobrze w mniejszych rozmiarach. Chłopaki z GitHub napisali świetny blog post o tym, jak zarządzali czystością w swojej niestandardowej czcionce.

Chciałbym spróbować ustawić go na siatce i podążać śladami ludzi GitHub. Zrobili dobrą robotę na swoich ikonach.

Również: czy ikony różnią się wielkościami numerycznymi między iPodem Touch a iMacem, czy jest to efekt uboczny różnych ustawień DPI? Może to również dotyczyć renderowania czcionek.

Jeśli to możliwe, baw się z ustawieniami DPI. Nie używam komputerów Mac, więc nie wiem, jak zmienić te ustawienia na jednym. Nadal jednak nie naprawi problemu z siatką bazową. Czy jesteś w stanie edytować czcionki, o których mowa?

Answer 2

Dodawanie do odpowiedzi @ sporkbox jest, jeśli są szczególnie zaniepokojeni przeglądarek WebKit, istnieją następujące opcje CSS możesz użyć:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
-webkit-font-smoothing : none | subpixel-antialiased | antialiased 

Answer 3

Odkryłam, że niektóre przeglądarki starają się naśladować odważny krój czcionki, gdy grubość linii nie jest pogrubiona, co powoduje, że coś przypomina sytuację, którą opisujesz. Czy na pewno pojawia się to gdzieś, gdzie masz font-weight: normal;?

Answer 4

Zastosowanie wygładzania czcionki CSS

-webkit-font-smoothing: antialiased; 

Answer 5

-webkit perspektywa: 1000;

Fixed to dla mnie

Answer 6

tam dziwny trik, który działa kiedyś, spróbuj:

-webkit-transform:rotateZ(0); 
-moz-transform:rotateZ(0); 
-o-transform:rotateZ(0); 
transform:rotateZ(0); 

jeśli masz blok skoncentrowany, starają się sprawdzić, czy w lewo Przesunięcie jest liczbą całkowitą. Możesz użyć Javascript, aby to sprawdzić i naprawić. Mogę Ci pomóc jeśli chcesz.

Answer 7

Najlepsze rozwiązanie cross-browser jest:

.your_font_class{ 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

Answer 8

Niektóre z rozwiązań wymienionych wcześniej trochę/jakoś wystarczyły ale co to ustalone dla mnie było usunięcie (zakomentowanie) wielkość spadku czcionki z „fa "class inside font-awesome.css (i font-awesome.min.css):

font-size: inherit; 

Końcowy wynik klasy wygląda następująco:

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    /* font-size: inherit; */ 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

Poza tym, musiałem dostosować dużych ikon, ponieważ zostały one wciśnięty w dół zbyt daleko od zakomentowanie ta linia z klasy "fa-lg":

vertical-align:-15% 

Klasa wygląda następująco

.fa-lg { 
    font-size: 1.33333333em; 
    line-height: 0.75em; 
    /* vertical-align: -15%; */ 
} 

Używam Font Awesome 4.7.0