Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

13. CSS3: czcionki, typografia

13. CSS3: czcionki, typografia

Autor: Adam Stępień Opublikowano: 9 września 2011 Odsłon: 11 570

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.

<p>Lorem ipsum <font face="Arial Black">dolor sit</font> amet.</p>

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.

@font-face
{
    font-family: mojaCzcionka;
    src: url('mojaCzcionka.woff'), url('mojaCzcionka.ttf'), url('mojaCzcionka.eot');
}

.mojSelektor
{
    font-family: mojaCzcionka, Arial, Verdana;
    font-size: 14px;
}

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

<p class=mojSelektor>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

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

FF typografia


Chrome 13

Chrome typografia


Internet Explorer 9

IE9 typografia


Opera 11.51

Opera typografia


Internet Explorer 8

IE8 typografia


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.

@font-face
{
font-family: czcionka;
src: url('http://www.stronazczcionka.com/czcionka.ttf');
unicode-range:
U+0041-U+005A, /* wielkie litery A-Z */
U+0061-U+007A, /* małe litery a-z */
U+0104-U+0107, /* Ą ą Ć ć */
U+0118-U+0119, /* Ę ę */
U+0141-U+0144, /* Ł ł Ń ń */
U+015A-U+015B, /* Ś ś */
U+0179-U+017C, /* Ź ź Ż ż */
U+00D3, /* Ó */
U+00F3, /* ó */
}

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

Typografia CSS3

Zobacz również

Komentarze

Pewnych terminów nie należy tłumaczyć w tym przypadku chodzi mi wyraz "czcionka" która de facto oznacza rodzaj nośnika pojedynczych znaków pisma drukarskiego. W tym przypadku należy używać nazwy "font".
Kriss, 5 czerwca 2013, 13:55

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.