HTML i CSS dla początkujących (Część 45): Eleganckie czcionki na stronę.

Standardowy sposób definiowania czcionek wygląda mniej więcej tak:

body {
   font-family: Arial, Helvetica, sans-serif;
}

Tutaj elementowi body przypisywana jest czcionka Arial. Jeśli nie jest ona dostępna na systemie odbiorcy, przeglądarka korzysta z Helvetica. Jeśli również nie ma czcionki Helvetica, przeglądarka zostanie poproszona o użycie czcionki bezszeryfowej. Ostatecznie nie można tego naprawdę kontrolować. Nie macie zatem pełnej kontroli nad ostatecznym rezultatem. To, co pięknie przygotowaliście w GIMP lub Photoshopie, może się rozpłynąć w dżungli czcionek. Więcej na ten temat, a także sposób rozwiązania tego problemu, znajdziecie w dalszej części.

Najpierw jednak wróćmy do klasycznej wersji. Poniżej znajdziecie typową definicję, dzięki której można dostosować podstawowy wygląd strony internetowej. Przy użyciu definicji dla body możecie najpierw ustawić podstawowe parametry dotyczące czcionek.

body {
   font-family: Georgia, Times, "Times New Roman", serif;
   color: #000;
   font-size: 1.1em;
   line-height: 150%;
}
p {
   font-size: 1.1em;
}

Oczywiście można dodatkowo dostosować wygląd poszczególnych elementów strony. Należą do nich na przykład nagłówki, kursywa itp. Jednak ponownie zwróćcie uwagę na zasadę dziedziczenia w CSS.

h1 {
   font-size: 1.6em;
}

W efekcie w przeglądarce może to wyglądać następująco:

Korzystanie z Webfonts

Problem tradycyjnych definicji czcionek jest oczywisty: ostatecznie nie możecie być pewni, czy podana przez Was czcionka jest dostępna u odbiorcy. Przeglądarki w razie potrzeby wybierają podobną do Waszej, jeśli nie znajdą podanej przez Was czcionki. W ten sposób faktycznie nie macie pełnej kontroli nad ostatecznym rezultatem. Właśnie w tym momencie pomocą służy @font-face. Pozwala on na wyraźne określenie czcionki do użycia. Zasadniczo działa to tak samo jak w przypadku obrazów. Trzeba podać ścieżkę do pliku czcionki.

W nowoczesnych przeglądarkach do @font-face stosuje się tzw. WOFF-Webfonts. Są one znacznie mniejsze niż wcześniej używane formaty Webfontów EOT i TTF.

Typowa definicja @font-face wygląda następująco:

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Nazwę używanej czcionki zapisuje się w font-family. Do tego momentu nie ma zatem żadnych szczegółów dotyczących składni. Poprzez src:url() podaje się adres URL, pod którym znajduje się plik czcionki Webfont. Jeśli teoretycznie istnieje możliwość dostępności czcionki na komputerach użytkowników, należy dodatkowo podać local. Nazwa czcionki jest określana w parametrze local.

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   local: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Po zdefiniowaniu @font-face można normalnie używać Webfontów.

h1 {
   font-family: "Bitstream Vera Serif Bold";
   font-size: 1.2em;
   color: #3399FF;
}

Tutaj znajdziesz przykładowe Webfonty

Pojawia się zatem pytanie, skąd można uzyskać pliki Webfontów. Na przykład Google hostuje wiele z tych Webfontów na stronie http://www.google.com/fonts.

Te czcionki można bezpośrednio osadzić poprzez wspomnianą stronę.





Odpowiednie wywołanie może wyglądać następująco:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

W parametrze font-family podaje się pożądany Webfont. Na wspomnianej stronie Google znajdziecie te nazwy i wywołania. Po osadzeniu Webfontu można go stosować jak każdą inną czcionkę.

body {
   font-family: 'Tangerine', serif;
   font-size: 1.2em;
}

Kto chce, może używać na swojej stronie kilku Webfontów. Aby to zrobić, należy na stronie http://www.google.com/fonts wybrać interesujące Webfonty, a następnie kliknąć na Dodaj do kolekcji. Gdy wszystkie Webfonty znajdują się w własnej kolekcji, należy kliknąć na Użyj w dolnej części strony. Wyświetlone zostanie swoiste "tachometr".





Na podstawie tego obrazu można zauważyć, jak osadzenie Webfontów wpływa na czas ładowania strony. Te efekty są faktycznie mierzalne i zwiększają się wraz z dodaniem kolejnych Webfontów.

Jak łatwo można używać kilku różnych czcionek internetowych, które wcześniej dodano do kolekcji, pokazuje następny przykład:

<link href="http://fonts.googleapis.com/css?
family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">

Poszczególne czcionki internetowe są zapisane jeden za drugim, oddzielone pionową kreską. Pełne wywołanie zgodne z wybraną kolekcją wyświetlane jest na już wspomnianej stronie Use-.

Wiele z tych czcionek internetowych oferuje tzw. podzbiory, takie jak Łaciński lub Cyrylica. Aby włączyć je do tego, określa się pożądany podzbiór jako wartość parametru.

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Jeśli chcesz użyć kilku takich podzbiorów, zapisuje się je oddzielając przecinkami.

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Jednakże zastosowanie tej czcionki internetowej jest kwestią kontrowersji z zupełnie innego powodu. Po pierwsze, podczas ładowania strony należy nawiązać połączenie z serwerem Google. Można to ominąć, pobierając plik czcionki internetowej i ładowując go na własny serwer. Niemniej jednak zwróć uwagę na warunki korzystania z czcionek internetowych, które chcesz w ten sposób użyć.

Definicja czcionki na stronie przykładowej

Poniżej znajdziesz definicje czcionek, które będę używać na aktualnej stronie przykładowej:

body {
   font-family: 'Crimson Text', Helvetica, sans-serif;
   color: #444;
   text-decoration: none;
   line-height: 1.5em;
   font-size: 1.2em;
}
p { 
   font-size: 1.1em;
}
h1 {
   font-size: 1.6em;
   color: #3399FF;
}

Oczywiście możesz dodać dodatkowe elementy. W obecnym przypadku ta składnia wystarcza w zupełności.