search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

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

  • Artykul wypas, dobra robota!
    Nigdy nie stosowalem ladnych czcionek w projektach ze wzgledu na obawy o jakich wspominales brak flasha czy js w przegladarkach czytelnika do @fontface mnie przekonales 🙂
    Jeszcze raz dzieki za dobry artykul.

  • Ciekawe kompedium – przyda się zwłaszcza, że ostatnio ludzie chcą większego wyboru niż Verdana vs. Times 🙂

  • Krystian

    A czy przypadkiem @font-face nie ma problemu z TTF’ami? Wiem, że mi Myriada strasznie kaszanił na każdej przeglądarce…

  • @up Właśnie specjalna konstrukcja @fontface, którą również podał Piotr pozwala przeglądarce na wczytanie tego pliku z czcionką, jaki będzie potrafiła otworzyć i wygenerować. Przy tej metodzie warto również wspomnieć o generatorze, który robi za nas wszystko: konwertuje czcionkę na inne formaty i tworzy kod css. Do tego możemy sobie wybrać ogrom dodatkowych opcji. To wszystko dostępne tutaj: http://www.fontsquirrel.com/fontface/generator

  • nawet o nim wspomniałem w tekście o @font-face 🙂

  • Czy @font-face obsługuje polskie fonty?

  • Dobra problem rozwiązany 😉
    Musiałem tylko w generatorze zaznaczyć „EXPERT..” i z listy wybrać Polish.

    Powiedzcie mi jeszcze jedno. Pod względem SEO nic się nie zmienia i google jakoś źle na to nie patrzy?

  • Fajny artykuł. Ja korzystam głównie z Cufón’a. Wcześniej miałem do czynienia z sIFR ale uciążliwe było tworzenie czcionek FLASH.

  • B0SS

    Dodam od siebie że czcionki flash nie da się scrolować co jest uciążliwe

  • Osobiście ograniczam się do dodawania cieni do textu w css ponieważ jestem przewrażliwiony na punkcie wydajności , nie było by całego zamieszania gdyby twórcy przeglądarek wzięli przykład z nieszczęsnego IE który bardzo ładnie wyrównuje krawędzie literek.