Snippet: jak poprawić antialiasing pod Chrome na Mac OS X?

Czasami zdarza mi się, że na Chrome pod OS X czcionki wyglądają na zbyt grube. Graficy od razu zaczynają płakać a akanci popadają w depresję, tłumacząc klientowi dlaczego strona nie wygląda w przeglądarce identycznie jak w Photoshopie. Prosta rada: zmienić wartość parametru font-smoothing w CSS.

-webkit-font-smoothing: antialiased

Uwaga: działa to tylko na Maku. Pod Windows nie ma absolutnie żadnej różnicy. No i warto stosować z rozwagą. Zwykle, bardzo poprawia to wyrazistość przy dużych nagłówkach, natomiast zastosowanie tego parametru do tekstu głównego o rozmiarze 12-14 punktów może sprawić, że tekst zacznie wyglądać jak na IE6 pod Windows 98 :)

Webfont + opacity czyli dziwne zachowanie czcionek w Google Chrome.

Właściwie każdy projekt, który wychodzi spod moich palców, gdzieś zaszytą ma jakąś animację z wykorzystaniem CSS3 transitions lub opartą na jQuery – proste przejście od opacity: 0 do opacity: 1, czy też animacje fadeIn/fadeOut to praktycznie standard. Rzadkością są też projekty, gdzie nie embedowałbym przynajmniej jednego kroju czcionki jako webfont. W jednym z realizowanych projektów zauważyłem, że te dwie przydatne praktyki nie lubią się na wzajem – a raczej, nie lubi ich Google Chrome. Czcionka zachowuje się po prostu… dziwnie.