13. CSS3: czcionki, typografia

95% informacji na stronie to język pisany, dlatego typografia jest bardzo istotnym elementem projektowania witryn internetowych. Lepszą kontrolę nad typografią zapewnia każda nowa wersja CSS. Specyfikacje CSS3 opisuje wiele nowych funkcji, które zostały z powodzeniem zaimplementowane w najnowsze wersje przeglądarek internetowych.

Standardowe czcionki Webowe, takie jak Arial, Times, Verdana i Georgia powoli przechodzą do lamusa na rzecz dyrektywy @font-face służącej do linkowania niestandardowych czcionek. Prezentują się one znakomicie i poprawiają czytelność tekstu. Ponadto prezentują się nienagannie od strony wizualnej, znacząca upiększając stronę. Przyjrzyjmy się niektórym zmianom wprowadzonym w module CSS3 Fonts.

Pierwsza zmiana wiąże się z porzuceniem elementu font. Do tej pory można było zmieniać czcionkę, dodając element font.

Użycie elementu font jest już niezalecane, choć nadal obsługiwane przez przeglądarki. Jest to spowodowane problemem mieszania się dwóch warstw: treści i prezentacji. Rozwiązaniem tego problemu może być ustawienie odpowiedniej rodziny czcionek (właściwość font-family: Arial Black).

CSS w wersji 2 opisywał koncepcję osadzania czcionek przez użycie dyrektywy @font-face. Jest ona co prawda obsługiwana już od dawna przez przeglądarki internetowe, włącznie z Internet Explorer 4, jednakże CSS3 rozszerza jej funkcjonalność. Zanim pojawił się Internet Explorer 9 dyrektywa @font-face mogła być używana wyłącznie w kontekście czcionek EOT. W IE9 co prawda nadal można wskazywać obiekty EOT, niemniej nie jest to już zalecane. Web designerzy są zachęcani do porzucenia tego. Naprzeciw wychodzi format WOFF. Został on opracowany przez Mozillę i zgłoszony w 2010 roku do organizacji standaryzującej W3C przez Mozillę, Operę i Microsoft.

Format WOFF został przygotowany specjalnie do użycia w sieci Internet. Metadane czcionki w formacie WOFF pozwalają na pewną ochronę przed piractwem. Można w nich umieścić informacje, kto stworzył czcionkę, dlatego autorzy czcionek opowiadają się za tym formatem. Warto jeszcze dodać, że format ten jest bezstratnie kompresowany. Specyfikacje CSS3 opisuje go de facto jako kontener do innych formatów czcionek: TruType, OpenType i Open Font. Zobaczmy na przykładzie, jak można wykorzystać nowy format.

Powyższy kod CSS można zastosować do danego fragmentu tekstu np. w ten sposób:

Dobrym zwyczajem jest umieszczanie dyrektywy @font-face na początek pliku arkusza kaskadowych stylów CSS. Tak też zrobiliśmy w przykładzie. Dla zwiększenia zgodności z różnymi wersjami przeglądarek linkowaliśmy do różnych formatów: WOFF, TrueType i EOT. W selektorze wskazaliśmy zdefiniowaną czcionkę. Ponadto podaliśmy inne nazwy czcionek. Przeglądarka będzie kolejno sprawdzała, czy jest w stanie obsłużyć dany font. Jeżeli będzie miała problemy, to przejdzie do próby wyświetlenia tekstu inną czcionką.

Darmowe czcionki - na co uważać

W Internecie znajduje się dużo darmowych czcionek. Należy jednak uważać. Po pierwsze warto przeczytać z uwagą licencję. Może ona np. zawierać zapis, że licencjonowanie dotyczy wyłącznie jednego formatu. Może to spowodować problem z wyświetleniem czcionki przez różne przeglądarki. Przykładowo jeżeli będzie to WOFF, musimy się liczyć z tym, że ci, którzy korzystają ze starych przeglądarek, nie będą w stanie wykorzystać tej czcionki.

Kolejnym kruczkiem jest zapis licencyjny o wykorzystaniu czcionki wyłącznie przez określoną grupę, np. organizacje non-profit. Jeżeli tworzymy stronę na cele komercyjne, oferując sprzedać produktów i ich promocję, wówczas używanie takiej czcionki jest bezprawne.

Niektóre czcionki nie obsługują polskich znaków. Jeżeli zakupimy bądź nabędziemy licencję na czcionkę, która nie obsługuje polskich ogonków, nie będziemy w zasadzie mieli z niej większej korzyści, gdyż nie obsługuje ą, ę, ó itd. Zakładamy oczywiście, że tekst na stronie będzie właśnie w języku polskich. W przypadku witryn anglojęzycznych problem ten będzie marginalny, o ile w ogóle będzie występował.

Nieraz trzeba się również liczyć, że czcionka będzie dobrze się prezentowała nawet w najnowszych wersjach przeglądarek. Aby nie być gołosłownym zamieszczamy zrzuty ekranowe tekstu z  tej strony.

Firefox 6

Chrome 13

Internet Explorer 9

Opera 11.51

Internet Explorer 8

Jak widzimy, najnowsze wersje przeglądarki Firefox i Internet Explorer bez zarzutu renderują linkowaną czcionkę, podczas gdy Opera i Chrome generują ostre krawędzie. Brak gładkich krawędzi znacząco pogarsza wrażenia wizualne. W starszych przeglądarkach, takich jak IE8 i wcześniejszych, przeglądarka w ogóle nie radzi sobie z linkowaniem specjalnej czcionki. Efekt, a raczej jego brak, widoczny jest od razu. Trudno wówczas mówić o jakiejkolwiek przyjemności z czytania takiego tekstu.

Ostatnią kwestią związaną z darmowymi czcionkami jest problem ich kradzieży. Samo znalezienie niezabezpieczonej czcionki w Internecie albo na komputerze nie daje prawa do jej wykorzystania. Jeżeli nie możemy znaleźć informacji o jej licencjonowaniu, najlepiej darować sobie i jej nie używać.

unicode-range

W dyrektywie @font-face ciekawą nowością jest właściwość unicode-range. Deskryptor ten pozwala określić zakres obsługiwanych znaków.

Wartości są zapisane w szesnastkowym formacie zapisu z przedrostkiem "U+". Dotyczą one znaków kodowanych w Unicode, a ich zakres musi się mieścić między 0 a 10FFFF. W powyższym kodzie wskazano niektóre wartości, a ich objaśnienie zakomentowano. Składnia musi być w postaci wartości rozdzielanych przecinkiem. W przeciwnym razie, będzie to traktowane jako błąd i pomjane.

Na zakończenie chcemy polecić Wam przyjrzenie się stronie, w której wykorzystano omówione metody sterowania typografią.