[CSS][JS] Metody dodawania ładnych czcionek na stronę

Dodawanie niestandardowych czcionek na strony WWW od dawna było czymś bardzo pożądanym przez twórców stron WWW, a w szczególności przez grafików którzy, dzięki możliwości implementowania różnych czcionek w swoich projektach, mogli tworzyć bardziej kreatywne wizualizacje stron.
Na chwilę obecną istnieje kilka sposobów na implementację nowych czcionek na stronach (linki przenoszą do stron z opisem):

• sIFR
• Typeface
• Cufon
• @font-face
• Podsumowanie

Każda z tych metod ma swoje wady i zalety, które postaram się zaprezentować w tym artykule.

Section 1sIFR

sIFR (ang. Scalable Inman Flash Replacement) jest to metoda embedowania czcionek, która opiera się na generowaniu czcionek przy użyciu technologii Flash i implementowaniu ich na stronie WWW przy użyciu JavaScript. Dlatego bardzo ważne jest, aby użytkownik danej strony nie miał zablokowanej obsługi Flash i JS w swojej przeglądarce. W innym przypadku, zobaczy stronę z podstawowymi czcionkami zdefiniowanymi w pliku CSS.

Section 1.1Implementacja kodu na stronie WWW

Należy pamiętać, że w przypadku używania metody sIFR występuje potrzeba korzystania z programów Adobe Flash do wygenerowania pliku z czcionką, co jest dość poważnym utrudnieniem. Kolejnym utrudnieniem jest długość czasu jaki potrzeba aby skonfigurować sIFR.

1. Pobierz pliki których potrzebujesz

   Pobierz najnowszą wersję sIFR. W środku paczki znajdują się 4 foldery, ale potrzebować będziemy 3 z nich: css, flash i js.

2. Wygeneruj pliki czcionek

   Tak jak pisałem powyżej, możemy wykorzystać z programu Adobe Flash lub wykorzystać odpowiedni generator czcionek online dostępny pod tym adresem. Należy pamiętać, aby do tego generatora używać czcionek TruType.

3. Zapisz pliki w katalogu strony

   Musisz zapisać pliki: sifr.js, sifr-config.js oraz czcionka.swf do katalogu głównego strony. W moim przypadku, pliki *.js wrzuciłem do katalogu js, a plik z czcionką do katalogu font.

4. Wstaw kod na stronę

   Do pliku HTML należy wpisać w sekcji head lub tuż przed znacznikiem </body> następujące linijki:

   <script src="js/sifr.js" type="text/javascript"></script> <script src="js/sifr-config.js" type="text/javascript"></script>

   <script src="js/sifr.js" type="text/javascript"></script> <script src="js/sifr-config.js" type="text/javascript"></script>

5. Konfiguracja sIFR

   Teraz możemy przystąpić do konfigurowania czcionki. W tym celu należy otworzyć plik sifr-config.js w jakimś edytorze, może to być np. Notepad++.

   var czcionka = { src: 'font/czcionka.swf' }; sIFR.activate(czcionka); sIFR.replace(czcionka, { selector: '.sifr' });

   var czcionka = { src: 'font/czcionka.swf' }; sIFR.activate(czcionka); sIFR.replace(czcionka, { selector: '.sifr' });

6. Bardziej zaawansowana konfiguracja

   Powyższy przykład nie wyczerpuje możliwości konfiguracyjnych tej metody. Możemy nieco rozbudować ten skrypt o obsługę elementów wewnątrz elementu w którym jest "embedowana" czcionka.

   var czcionka = { src: 'font/czcionka.swf' }; sIFR.activate(czcionka); sIFR.replace(czcionka, { selector: '.sifr', css: [ 'h2 { font-size: 22px; background-color: #cccccc; padding: 5px; }', 'em { font-style: italic; }', 'strong { font-weight: bold; }', 'a { text-decoration: none; }', 'a:hover { text-decoration: underline; }' ] });

   var czcionka = { src: 'font/czcionka.swf' }; sIFR.activate(czcionka); sIFR.replace(czcionka, { selector: '.sifr', css: [ 'h2 { font-size: 22px; background-color: #cccccc; padding: 5px; }', 'em { font-style: italic; }', 'strong { font-weight: bold; }', 'a { text-decoration: none; }', 'a:hover { text-decoration: underline; }' ] });

Section 1.2Zalety i wady

Zalety

• można zaznaczać tekst
• ładnie wyświetla czcionki, bez rozmycia i poszarpanych brzegów
• jest dobrze odczytywany przez różne urządzenia typu screen
• nie narusza licencji czcionek dopóki plik czcionki znajduje się w pliku o rozszerzeniu *.swf
• można stosować wiele różnych czcionek jednocześnie
• lekkie pliki z czcionką i js

Wady

• spowalnia czas ładowania się strony
• wymaga obsługi JavaScript i Flash przez przeglądarkę użytkownika
• występuje delikatny przeskok między pierwotnym a docelowym formatowaniem tekstu (widoczny podczas ładowania się strony)

Section 1.3sIFR - podsumowanie

Jest to najlepsza metoda do dołączania czcionek na stronę WWW spośród metod korzystających z obsługi JavaScript. Lecz skomplikowana konfiguracja może skutecznie odstraszać webmasterów od korzystania z niego. Lecz osiągnięty efekt powinien zadowolić każdego.