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 reinstalacje. Najlepszym rozwiązaniem będzie sprawdzenie samemu, która technologia jest dla nas wygodniejsza.

Przejdźmy już do rzeczy.

1. Wchodzimy na stronę www.

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:

1
2
3
4
5

<script src='".INCLUDES."cufon-yui.js' type='text/javascript'></script>
<script src='".INCLUDES."Arial_400.font.js' type='text/javascript'></script>
<script type='text/javascript'>
Cufon.replace('h1');
</script>

7. I już. Wszystkie nagłówki h1 będą od teraz wygładzone.

8. W wypadku, gdybyśmy chcieli wykorzystać tę technikę do wiekszej ilości elementów należy wprowadzić zmiany w powyższym kodzie:

1
2
3

<script type='text/javascript'>
Cufon.replace(['h1','.wyladzanie']);
</script>

Mam nadzieję, że przyda się to grafikom pracującym przy tym systemie 🙂