chevron-left chevron-right

[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):

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

sIFR

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.

Implementacja 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>

  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' });

  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; }'
			]
		});

Zalety 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)

sIFR - 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.