Cufon - Sposób na uniwersalny kontur tekstu (text-stroke) działający we wszystkich przeglądarkach

Chciałbym dziś pokazać obejście na wprowadzenie obrysu tekstu (efekt text-stroke), działający we wszystkich przeglądarkach internetowych. Warunek ten jest najbardziej ograniczający, ponieważ teoretycznie w przeglądarkach opartych na silniku Webkit (Chrome, Safari) w CSS możemy zdefiniować obramowanie tekstu, ale niestety nie zadziała ono na innych przeglądarkach. Dlatego jest to raczej marna opcja. Na szczęście można osiągnąć podobny efekt (w pewnym stopniu) wykorzystując bibliotekę Cufon.

Co daje Cufon?

Biblioteka Cufon pozwala nam na rzucanie cienia przez tekst, który zostanie wyrenderowany i dzięki temu obsłużony przez wszystkie przeglądarki. Możemy wykorzystać ten fakt i rzucić cień w każdą ze stron i tym sposobem imitować obrysowanie tekstu.

Sposób może i miałki, ale jeśli wystarczy nam niewielki obrys to będzie wyglądało przyzwoicie, a problem z obsłużeniem wielu przeglądarek całkowicie znika.

Jak zrobić obrys?

Dajmy na to, że chcemy że chcemy obrysować zielonym kolorem treść nagłówków h1 do których przypiszemy klasę stroked. Aby tego dokonać musimy dołączyć do sekcji head strony poniższy kod:

I to wszystko. Jak widać rzucamy jedno-pikselowy cień w kolorze #00ff00 we wszystkie strony. O ile kolorem możemy manipulować dowolnie, o tyle zwiększanie rozmiaru cienia, może wyglądać mniej estetycznie, ale nic lepszego w obecnej sytuacji nie wyrzeźbimy.