Artykuł

wrz 21 2011
0

Własne czcionki na stronie, dzięki CSS3

W ubiegłym tygodniu, na fanpage'u dostałem informację od jednego z użytkowników o kiepskiej jakości czcionki na blogu. Jak się później okazało, problem dotyczył w głównej mierze Windowsa XP, który nie posiada funkcji wygładzania czcionek. W gruncie rzeczy, używałem dość popularnych czcionek z rodziny Lucinda, które są dostępne na większości dostępnych obecnie OSach i często można je spotkać właśnie w sieci. Niestety, na Windowsie XP wyglądają co by tu delikatnie mówić - po prostu tragicznie. Pojawił się zatem problem.

Pierwszym rozwiązaniem, które przychodzi do głowy, jest wykorzystanie popularnych, starych i sprawdzonych czcionek - np. Ariala, Verdany, Tahomy... Niestety czcionki te, mi się już trochę znudziły (podejrzewam, że sporej grupie internautów również).

Na szczęście, znalazłem inne rozwiązanie - zastosowanie własnej, przez siebie wybranej czcionki i dostarczenie jej użytkownikom za pomocą CSS3. Efekty tej zmiany, powinny być dla Was widoczne już teraz:). Jeśli nie, to warto być może przeczyścić pamięć podręczną, lub zaktualizować przeglądarkę, jeśli jest ona starej daty:)

Wady i zalety własnych czcionek

Zanim przejdziemy do części praktycznej, warto na początek zapoznać się z wadami i zaletami stosowania własnych czcionek.

Zacznijmy zatem od wad.

Wady

Rozwiązanie oparte o wykorzystanie własnych czcionek, ma kilka wad. Na szczęście wady te, daje się w miarę łatwo pokonać w większości przypadków. Spójrzmy zatem na poniższe podpunkty:

  • Wsparcie przeglądarek. Jak przy każdym rozwiązaniu opartym o CSS3 istnieje problem wsparcia przez starsze przeglądarki. Na szczęście w tym przypadku jest całkiem dobrze, ponieważ konstrukcja CSS, której użyjemy w dalszej części wpisu, była wspierana przez Internet Explorera od wersji 5. Brzmi to trochę szokująco, ale dla nas jest to jak najbardziej pozytywna wiadomość. Niestety różne przeglądarki, wspierają różne formaty czcionek (lista na podstawie książki (HTML5 i CSS3 - Standardy przyszłości - patrz niżej):

    • Embedded Open Type (EOT) - IE 5-8
    • TrueType (TTF) - IE9, F3.5, C4, S4
    • Open Type (OVG) - IE9, F3.5, C4, S4, O10.5
    • Scalable Vector Graphics (SVG) - IOS
    • Web Open Font (WOFF) - IE9, F3.6
    Jeśli chcemy obsłużyć wszystkie przeglądarki, musimy obsłużyć również wszystkie formaty czcionek, na szczęście istnieją miejsca w sieci (o tym później) skąd można pobrać całe pakiety czcionek, we wszystkich wyżej wymienionych formatach:) Ponadto, jeśli jakaś przeglądarka nie obsługuje tej technologii, to skorzysta ona z tradycyjnych czcionek, podanych w konstrukcji font-family:)
  • Drugą, być może istotną wadą, będzie konieczność pobierania przez użytkowników tych czcionek z serwera. Oczywiście wszystko dzieje się automatycznie (czcionki nie instalują się do systemu, zostają co najwyżej w pamięci podręcznej przeglądarki), ale sam fakt pobierania, przyczynić się może do szybszego zużycia transferu, który został przydzielony naszej stronie - o ile oczywiście macie jakieś limity

Zalety

Główną zaletą tego rozwiązania, jest fakt że na wszystkich nowoczesnych przeglądarkach i systemach, nasza strona będzie wyglądać dokładnie tak, jak my tego oczekujemy.

Ponadto, nie jesteśmy ograniczenie do standardowej i nie oszukujmy się małej puli czcionek, które przez te wszystkie lata zdążyły się znudzić użytkownikom.

Zdobywamy czcionki

Zanim przejdziemy do strony technicznej, musimy pozyskać jakieś czcionki, najlepiej od razu we wszystkich pożądanych przez nas formatach. Świetnym miejscem, dla realizacji naszego celu jest serwis Font Squirrel, a szczególnie podstrona, na której możemy od razu pobierać tzw. @font-face kits:)

Po wybraniu interesującej nas czcionki (fonty z podanej podstrony, posiadają wszystkie interesujące nas warianty), możemy obejrzeć, jak prezentuje się ona w praktyce.

Na zakładce Test drive, wybranej czcionki możemy wprowadzić dowolny tekst. Warto w tym momencie przede wszystkim sprawdzić, czy działają polskie znaki (chyba że nie planujecie jej używać na polskiej stronie). Jeśli macie dostęp do innych systemów (np. na Virtualboxie to warto przetestować podgląd czcionki, również na nich, aby uzyskać jak największą pewność słuszności własnego wyboru. Generalnie lepiej sprawdzają się chyba jednak czcionki kanciaste).

Po znalezieniu wybranej czcionki, możemy przygotować paczkę do pobrania. w tym celu, udajemy się na zakładkę @font-face Kit. Następnie wybieramy formaty czcionek (najlepiej pobrać wszystkie dostępne), a następnie określamy zestaw znaków regionalnych (subset). Dzięki wybraniu konkretnego pod zestawu, ograniczamy wielkość rozmiarów plików czcionek. Jeśli jednak, macie zamiar tworzyć stronę, z międzynarodową społecznością, która korzystać będzie z własnych języków, to warto pobrać wszystkie możliwe warianty, czyli po prostu nie określać zestawu znaków.

Na tej podstronie, możecie obejrzeć również demo, klikając na link webfont demo here.

CSS

Jeśli dotarliście do tego momentu, to widać znaczy, że chcecie skorzystać z tych czcionek na własnych stronach:) Zasadniczy kod, do realizacji tego zagadnienia, dostarcza nam już FontSquirell w pobranej przez nas paczce:) Spójrzmy zatem na kod, jaki wygenerował dla mnie serwis, dla czcionki Play:

@font-face {
    font-family: "PlayRegular";
    src: url("fonts/play/Play-Regular-webfont.eot");
    src: url("fonts/play/Play-Regular-webfont.eot?#iefix") 
             format("embedded-opentype"),
         url("fonts/play/Play-Regular-webfont.woff") format("woff"),
         url("fonts/play/Play-Regular-webfont.ttf") format("truetype"),
         url("fonts/play/Play-Regular-webfont.svg#PlayRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Cały powyższy kod, należy umieścić w pliku CSS (bądź w sekcji head strony). Na początek, definiujemy konstrukcję @font-face. Konstrukcję tę, możemy zdefiniować w danym dokumencie dowolną ilość razy. Każda jego instancja, powinna odpowiadać za inną czcionkę.

Wewnątrz selektora, umieszczamy właściwe reguły. Na początek, ustanawiamy rodzinę czcionki. To jaką nazwę tu wpiszemy, determinuje sposób wywołania czcionki w dalszej części dokumentu (nazwa ta nie musi być w żaden sposób zgodna z oryginalna nazwą czcionki, dobra praktyka nakazuje jednak by tak było).W kolejnym kroku, ustalamy ścieżki do czcionek na serwerze (tutaj moje ustawienie, w Waszym rozwiązaniu powinniście zastosować własne ścieżki). Warto trzymać się kolejności i zapisu zastosowanego przez FontSquirrel, aby nie narobić sobie problemów z IE:)

Ostatnie dwie właściwości, myślę że są wam dobrze znane i określają wagę oraz styl czcionki.

Czynność powtarzamy, dla wszystkich czcionek, które chcemy w ten sposób dodać do strony.

Wykorzystanie czcionki

To, że podepniemy czcionki do naszego kaskadowego arkusza styli, nie znaczy jeszcze, że czcionki w sposób auto-magiczny pojawią się na stronie same. W tym momencie, tylko je zadeklarowaliśmy, teraz wystarczy tylko skorzystać ze standardowej konstrukcji, której używamy do określania czcionki dla selektorów, czyli np.:

body, form, a, p, span, div, h2, h3, h4, 
h4, h5, h6, li, label, strong, em{
    font-family: "PlayRegular", Tahoma, Arial, sans-serif;
}

Konstrukcja dobrze znana - prawda:)? Jak widać, nie omieszkałem dodać również alternatywnych czcionek (o czym wspominałem wcześniej), dzięki czemu kod zawsze zadziała.

Osobiście jestem bardzo zadowolony z uzyskanego efektu, który zapewnia spójny wygląd na większości dostępnych obecnie na rynku przeglądarek. Również zużycie transferu, nie jest jakieś dramatycznie wysokie. Przykładowo, na 230 MB zużyte dziś do godziny 20, około 20MB przypadało na czcionki, co nie jest w gruncie rzeczy, jakąś szokującą wartością:) Zachęcam do eksperymentów, a w razie pytań/wątpliwości, zapraszam do komentarzy.

Literatura

Wpis powstał w oparciu o książkę HTML5 i CSS3 - Standardy przyszłości autorstwa Briana P. Hogana. Książka dostępna jest w księgarni internetowej Helion.

Data ostatniej modyfikacji: 28.11.2011, 18:36.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus