Różnice renderowania czcionek na Windows i OS X, rozmycie i inne problemy [PL]

Apple i Microsoft od zawsze reprezentowały różne podejścia w kwestii renderowania czcionek. Praktyczne skutki tego odczułem ostatnio na własnej skórze, w sytuacji gdy czcionka na Macu (OS X) wyświetlała się z dziwnym efektem rozmycia. Sytuacja była o tyle dziwna, że miała miejsce tylko przy konkretnych kolorach samej czcionki jak i tła (jasny tekst na ciemnym tle).

Co w tej sytuacji zrobić? Zwykle web developer nie ma pełnej kontroli nad renderowaniem czcionek, zanim jednak wywiesiłem białą flagę zrobiłem mały research, który doprowadził mnie do rozwiązania problemu.

Okazuje się, że twórcy przeglądarek udostępniają nam niestandardowe właściwości CSS, dzięki którym wychodzimy obronną ręką z przedstawionej sytuacji.

Oto rozwiązanie dla przeglądarek opartych o webkit:

-webkit-font-smoothing: antialiased;

Szczęśliwie również Firefox (od wersji 25) oferuje podobne obejście problemu poprzez zastosowanie:

-moz-osx-font-smoothing: grayscale;

Pamiętajcie jednak że jest to niestandardowe rozwiązanie służące do obejścia problemu i nie należy tego nadużywać dodając np. przedstawione właściwości w standardzie.

Podsumowując, przykładowa poprawka mogłaby wyglądać następująco:

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

Podziel się

Jeśli podobał Ci się ten artykuł, może warto podzielić się z innymi?

https://www.damianwajer.com/blog/roznice-renderowania-czcionek-na-windows-i-os-x/

Pozostańmy w kontakcie

Podobał Ci się ten wpis? Nie przegap kolejnej dawki przydatnej wiedzy! Tylko konkrety i najlepsze treści ze świata UX, web developmentu i produktywności. Głównie szybkie treści dla zajętych ludzi :).

Nie chcesz zostawiać e-maila ani śledzić na socialach?

Zobacz inne opcje pozostania w kontakcie.