Napisane przez Chemikpil dnia 15 marca 2011 14:29 · 0 komentarzy · 7393 czytań ·  ·  · 

W odpowiedzi na kilkana?cie wiadomo?ci w zwi?zku z moj? ostatni? realizacj? (www.rapduma.pl) postanowi?em napisa? kilka s?ów na temat wprowadzenia wyg?adzania czcionek na stronie opartej na PHP-Fusion. Wykorzystany w skórce "cud" to nic innego, jak znany pewnie wi?kszo?ci cufon. Pozwala on nie tylko na wyg?adzenie czcionki, co nie jest ju? wielkim osi?gni?ciem, ale równie? na za??czanie na naszej stronie dowolnego fonta, jaki tylko jest nam potrzebny. Podobny efekt mo?emy uzyska? za pomoc? sIFR. Pytanie - dlaczego akurat cufon? Przemawaij? za nim dwie rzeczy: lekko?? i fakt, i? jest on w pe?ni napisany w JavaScripcie. Konkurencja stworzona we flashu spowalnia komputer (np. przy du?ej ilo?ci elementów do wyg?adzenia) oraz wymaga instalacji pluginu FlashPlayera, który ma tendencj? do tego, ?eby nadwyr??a? ludzk? cierpliwo?? ci?g?ym zawieszaniem si? i wo?aniami o reinstall. Najlepszym rozwi?zaniem b?dzie sprawdzenie samemu, która technologia jest dla nas wygodniejsza. Przejd?my ju? do rzeczy.

1. Wchodzi my na stron? http://cufon.shoqolate.com/generate.
2. Z menu w topie wybieramy "Download" i zapisujemy otwarty plik jako cufon-yui.js.
3. Nast?pnie wybieramy plik *.ttf czcionki, która nas interesuje (ja u?yj? dla przyk?adu systemowego Ariala). Akceptujemy regulamin i klikamy "Let's do this!". Drobna uwaga: je?li chcemy mie? na swojej stronie polskie znaki musimy zaznaczy? w sekcji "Inlcude the following glyphs (if available)" nast?puj?ce opcje: Basic Latin, Latin-1 Supplement, Latin-Extended-A oraz Latin-Extended-B.
4. Pobieramy plik nazwaczcionki_400.font.js - w moim przypadku Arial_400.font.js.
5. Do katalogu includes wrzucamy pliki cufon-yui.js oraz Arial_400.font.js.
6. Nast?pnie przechodzimy do pliku themes/templates/header.php i w sekcji head dodajemy: Cufon.replace('h1');
7. I ju?. Wszystkie nag?ówki h1 b?d? od teraz wyg?adzone.
8. W wypadku, gdyby?my chcieli wykorzysta? t? technik? do wi?kszej ilo?ci elementów nale?y wprowadzi? zmiany w powy?szym kodzie: Cufon.replace(['h1','.wyladzanie']);

To by by?o na tyle. Mamy nadzieje, ?e pomo?e to wam w upi?kszaniu waszych stron.

Autor:
Sonar: blog