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

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).

Przykład różnicy w renderowaniu czcionek:

mac-linux-windows

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:

Advertisements
Różnice renderowania czcionek na Windows i OS X, rozmycie i inne problemy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s