GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

Czcionki na stronach WWW

Włodzimierz Gajda

Teksty na stronach WWW stwarzają liczne problemy. Już sam wybór kroju i wielkości czcionki nie jest wyborem łatwym. W artykule omówię zagadnienia dotyczące czcionek na stronach WWW oraz przedstawię najlepsze współczesne rozwiązania wyboru czcionki i jej wielkości.

1. Rodzaje czcionek

Dwie główne charakterystyki czcionek dotyczą:

1.1 Szeryfowe, bezszeryfowe

Szeryfy są ornamentami, jakie zdobią końce linii tworzących litery.

Rysunek 1 przedstawia szeryfy litery H w kroju Times New Roman.

Kroje pisma, w których litery posiadają szeryfy nazywamy szeryfowymi. Do krojów tych należą między innymi: Garamond, Georgia, Palatino oraz Times New Roman.

Rysunek 1. Szeryfy (niebieski kolor) litery H w kroju Times New Roman

Jeśli litery nie posiadają szeryfów, to krój nazywamy bezszeryfowym. Popularnymi krojami bezszeryfowymi są: Arial, Helvetica, Tahoma, Trebuchet MS oraz Verdana.

Rysunek 2 przedstawia literę H w kroju Arial.

Rysunek 2. Brak szeryfów w kroju Arial

Czcionki szeryfowe są zazwyczaj stosowane w publikacjach drukowanych, zaś bezszeryfowe — w publikacjach elektronicznych. Jednym z powodów jest fakt, że rozdzielczość monitorów jest znacznie niższa od rozdzielczości, jaką operują drukarki. Szeryfy narysowane na urządzeniach o rozdzielczości 96 dpi (rozdzielczość współczesnych monitorów) są — przynajmniej w przypadku niewielkich liter — postrzępione i nieładne. Wyjątek stanowią kroje takie jak Georgia, które zostały przygotowane specjalnie z myślą o stosowaniu w publikacjach elektronicznych. Kształt liter i szeryfów zoptymalizowano tak, by otrzymać ładne i czytelne napisy w niskich rozdzielczościach.

Od każdej reguły są wyjątki. Verdana, jeden z najczęściej używanych krojów bez szeryfowych, posiada szeryfy w dużej literze I. W ten sposób rozwiązano problem nękający krój Arial: identyczność liter duże i oraz małe l.

źródło: Wikipedia.

Rysunek 3. Litery duże i oraz małe l w krojach Arial i Verdana

1.2 Proporcjonalne, nieproporcjonalne

Druga cecha, ilość miejsca przeznaczonego na jeden znak, wyznacza podział na czcionki proporcjonalne i nieproporcjonalne.

Czcionki nieproporcjonalne, nazywane również czcionkami stałej szerokości, (ang. monospaced fonts) charakteryzują się tym, że każdy znak zajmuje dokładnie tyle samo miejsca. Przykładem takiego kroju jest Courier New.

W czcionkach proporcjonalnych ilość miejsca przeznaczonego na każdą literę zależy od jej szerokości. Zazwyczaj litera m zajmuje znacznie więcej miejsca niż litera i, gdyż jest od niej szersza.

Przeważająca część czcionek jest proporcjonalna. Czcionkami proporcjonalnymi są między innymi czcionki szeryfowe Garamond, Georgia, Times New Roman oraz bezszeryfowe Arial, Helvetica, Tahoma, Trebuchet MS czy Verdana.

Rysunek 3 przedstawia napisy wykonane w kroju nieproporcjonalnym Courier New oraz w krojach proporcjonalnych (Arial, Times New Roman). Jedynie w pierwszym przykładzie każda z liter zajmuje dokładnie jeden prostokąt. W pozostałych, część liter nie mieści się (np. M), zaś część — zajmuje mniej niż pół prostokąta (np. I).

Rysunek 4. Różnica pomiędzy czcionkami nieproporcjonalnymi i proporcjonalnymi

Czcionki stałej szerokości stosuje się głównie do przedstawiania kodów programów komputerowych.

1.3 Inne podziały czcionek

Podziały czcionek na szeryfowe i bezszeryfowe oraz proporcjonalne i nieproporcjonalne są jasno zdefiniowane i powszechnie stosowane. Oprócz nich pojawiają się kategorie:

Czcionki rodziny cursive imitują odręczne pismo. Często są to kroje pochylone, w których poszczególne litery są łączone na wzór pisma odręcznego. Przykładami tego rodzaju kroju są Comic Sans MS oraz Zapf-Chancery.

Natomiast kroje fantazyjne stosują rozmaite metody dekorowania liter. Przykładami takich krojów są Alpha Geometrique, Critter oraz Western.

1.4 Ornamenty i czcionki specjalne

Osobną kategorią czcionek są ornamenty (ang. dingbat) oraz czcionki specjalne. Czcionki takie zawierają zestawy różnych symboli.

Rysunek 4 prezentuje alfabet napisany w kroju Webdings, rysunek 5 ilustruje litery kroju Seville, symbole muzyczne z rysunku 6 są napisane krojem Petrucci zaś figury szachowe z rysunku 7 — krojem Chess Kingdom.

Rysunek 5. Czcionka Webdings

Rysunek 6. Czcionka Seville

Rysunek 7. Czcionka Petrucci

Rysunek 8. Czcionka Chess Kingdom

Podział czcionek na szeryfowe, bezszeryfowe, nieproporcjonalne, proporcjonalne, odręczne i fantazyjne nie wyczerpuje zagadnienia. Odwiedzając hasła serif, sans-serif oraz list of typefaces w Wikipedii poznasz inne podziały.

2. Archiwa czcionek

W internecie znajdziesz wiele archiwów zawierających darmowe czcionki. Najatrakcyjniejszymi wydają mi się:

Na płycie dołączonej do MI 7/2006 zawarto około 1500 darmowych czcionek pochodzących z serwisu http://www.abstractfonts.com.

Jeśli szukasz polskich czcionek do zastosowań komercyjnych i jednocześnie chcesz uniknąć jakichkolwiek niejasności dotyczących praw autorskich, to możesz skorzystać z oferty firmy EXE z Wrocławia (http://www.exe.com.pl). Firma ta sprzedaje w niewielkiej cenie zestaw 100 polskich czcionek.

Szukając profesjonalnych czcionek polskich odwiedź witryny http://www.telefont.pl oraz http://www.theta.pl/pl/theta/polskie-fonty. Znajdziesz tam zestawy zawierające kilkuset profesjonalnych polskich czcionek. Nie są to jednak produkty tanie: zestaw taki kosztuje około 1000 zł.

3. Testowanie czcionek

3.1 Wygląd jednej czcionki

Do badania wyglądu czcionek stosowane są pangramy — zdania, które zawierają wszystkie litery alfabetu. Najpopularniejszymi pangramami angielskimi są:

The quick brown fox jumps over the lazy dog

oraz

Jackdaws love my big sphinx of quartz. 1234567890

pangram (gr. pan gramma: każda litera) — zdanie zawierające wszystkie litery alfabetu.

źródło: Wikipedia.

W języku polskim stosowane jest jedno ze zdań:

Zażółć żółcią gęślą jaźń
Zażółć gęślą jaźń

Pangramem, który zawiera wszystkie polskie litery (a nie tylko znaki diakrytyczne) jest:

Mężny bądź, chroń pułk twój i sześć flag.

Więcej pangramów znajdziesz w Wikipedii. Rysunek 8 przedstawia okno dialogowe prezentujące wszystkie znaki alfabetu łacińskiego w kroju Pacmania Normal.

Rysunek 9. Pangram przedstawiający czcionkę Pacmania Normal

Jeśli chodzi o testowanie większej ilości tekstu, to do tego celu wykorzystywany jest tekst „Lorem ipsum”. Pod adresem http://typetester.maratz.com znajdziesz serwis Typetester. Umożliwia on testowanie wyglądu tekstu pisanego różnymi czcionkami i w różnych kolorach.

Rysunek 10. Typetester: aplikacja do testowania czcionek

Lorem ipsum to tekst w języku łacińskim opracowany na podstawie rozprawy Cycerona pt. „De finibus bonorum et malorum”. Jest on od ponad 500 lat stosowany przez drukarzy do sprawdzania krojów pism i układu graficznego drukowanych publikacji.

W środowisko twórców stron internetowych tekst Lorem ipsum jest powszechnie stosowany jako wypełniacz szablonów.

Więcej informacji oraz pełny tekst Lorem ipsum znajdziesz na stronach Wikipedii http://pl.wikipedia.org/wiki/Lorem_ipsum oraz pod adresami http://www.lipsum.com i http://www.loremipsum.net.

Pod adresem http://www.lorem-ipsum.info/html/de-finibus/ znajdziesz pełny tekst rozprawy „De finibus bonorum et malorum”.

źródło: Wikipedia.

3.2 Wygląd wielu czcionek

Do sprawdzenia wyglądu napisów w różnych czcionkach możesz wykorzystać skrypt PHP. Biblioteka GD zawiera funkcję imagettftext(), która umożliwia napisanie napisu dowolną czcionką TTF, także taką, która nie jest zainstalowana w systemie.

Siódmym parametrem funkcji imagettftext() jest nazwa pliku .ttf. W przypadku czcionek zainstalowanych w systemie możesz podać nazwę pliku bez rozszerzenia i ścieżki, np. georgia:

$tekst = "A B C...";

$im    = imagecreate(800, 30);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

imagettftext($im, 16, 0, 20, 25, $black, 'georgia', $tekst);

W systemie Windows powyższe wywołanie spowoduje napisanie tekstu krojem C:\Windows\Fonts\georgia.ttf. Uwaga: nazwa kroju czcionki nie zawsze pokrywa się z nazwą pliku ttf. Na przykład w przypadku kroju Trebuchet MS nazwą pliku czcionki jest trebuc.ttf.

Jeśli dany krój nie jest zainstalowany w systemie, to do funkcji imagettftext() należy przekazać pełną ścieżkę do pliku .ttf. Jeśli plik .ttf umieścisz w tym samym folderze, co skrypt, wówczas możesz podać samą nazwę pliku .ttf (np. actionis.ttf):

imagettftext($im, 16, 0, 20, 25, $black, 'actionis.ttf', $tekst);

Kompletny skrypt generujący obraz z tekstem napisanym wybranym krojem czcionki jest przedstawiony na listingu 1.

<?php

header("Content-type: image/png");

$tekst = "The quick brown fox jumps over the lazy dog";

$im    = imagecreate(800, 30);
$black = imagecolorallocate($im, 0, 0, 0);
imagettftext($im, 16, 0, 20, 25, $black, 'georgia', $tekst);

imagepng($im);
imagedestroy($im);

?>


Listing 1. Skrypt generujący obraz PNG z tekstem napisanym wybraną czcionką

Wykorzystując funkcję imagettftext() możesz przygotować skrypt, który sprawdza wygląd zadanego tekstu w wielu różnych krojach. Rysunek 10 przedstawia taki test generowany przez skrypt PHP sprawdzający wszystkie czcionki z wybranego folderu.

Rysunek 11. Test wszystkich czcionek z folderu

Stosując podany przeze mnie skrypt możesz pobrać z internetu dowolną liczbę darmowych czcionek, a następnie sprawdzić wygląd zadanego tekstu w każdym z pobranych krojów. Krojów tych nie musisz instalować w systemie, wystarczy, że wypakujesz pliki .ttf do ustalonego folderu.

4. Czcionki dla webmastera

4.1 Ogród Zen CSS

Jakich czcionek możemy używać w arkuszach stylów? Szukając odpowiedzi na to pytanie przeanalizowałem wszystkie oficjalne projekty z Ogrodu Zen CSS (http://www.csszengarden.com). Pełne zestawienie wszystkich stosowanych czcionek w 199 projektach jest zawarte w tabeli 1.

lp. Czcionka Liczba projektĂłw
1. Arial 136
2. Verdana 114
3. Helvetica 86
4. Georgia 67
5. Times 38
6. Tahoma 35
7. Times New Roman 34
8. Trebuchet MS 32
9. Lucida Grande 18
10. Geneva 12
11. Lucida Sans Unicode 12
12. Courier 6
13. Courier New 6
14. Palatino 6
15. Garamond 4
16. Lucida 3
17. Arial Black 2
18. Lucida Sans 2
19. Palatino Linotype 2
20. Arial Narrow 1
21. Avantgarde 1
22. Century Gothic 1
23. Monotype Corsiva 1
24. Bitstream Vera Sans 1
25. Black 1
26. Comic Sans MS 1
27. Helvectica 1
28. Bitstream Vera Serif 1
29. Cochin 1
30. New Century Schoolbook 1
31. MS Serif 1
32. New York 1
33. Sunsans-regular 1
34. Din-medium 1
35. Book Antiqua 1
36. MS Sans Serif 1
37. Helvetica Neue 1
38. Baskerville 1

Tabela 1. Czcionki wykorzystane w oficjalnych projektach ogrodu Zen CSS

Okazuje się, że wybór czcionek nie jest duży. Na przeważającej ilości witryn stosowane są wyłącznie takie czcionki, co do których nie ma wątpliwości, że będą wyglądały poprawnie. Za czcionki takie autorzy projektów z Ogrodu Zen CSS uznali niemal wyłącznie czcionki standardowo dostępne na jednej z trzech platform: Windows, Macintosh oraz Linux. Tabela 2 zawiera zestawienie czcionek, które zostały wykorzystane w więcej niż jednym projekcie z Ogrodu Zen CSS.

lp. Rodzina Czcionki
1. bezszeryfowe Arial, Arial Black, Verdana, Helvetica, Tahoma, Trebuchet MS, Geneva, Lucida, Lucida Grande, Luicida Sans Unicode
2. szeryfowe Georgia, Times New Roman, Palatino, Garamond
3. nieproporcjonalne Courier, Courier New

Tabela 2. Czcionki pojawiające się w więcej niż jednym projekcie ogrodu Zen CSS

4.2 Core fonts for the Web

W roku 1996 firma Microsoft uruchomiła projekt o nazwie Core fonts for the Web. Celem projektu było opracowanie zestawu czcionek przeznaczonych specjalnie dla środowiska WWW. Wprawdzie projekt ten został zamknięty w roku 2002, lecz opracowane czcionki po dziś dzień stanowią żelazny repertuar znacznej większości stron WWW.

Pełne zestawienie czcionek Core fonts for the Web jest zawarte w tabeli 3.

lp. Rodzina Czcionki
1. bezszeryfowe Arial, Verdana, Trebuchet MS
2. szeryfowe Georgia, Times New Roman
3. nieproporcjonalne Courier New, Andale Mono
4. specjalne Comic Sans MS, Impact, Webdings

Tabela 3. Czcionki Core fonts for the Web

Podobną inicjatywę podjęła firma Adobe udostępniając zestaw Adobe WebType (http://www.adobe.com/type). Czcionki te jednak nie są popularne.

4.3 Czcionki dostępne na różnych platformach

Główny problem związany ze stosowaniem czcionek na stronach WWW polega na tym, że zestaw czcionek dostępnych na komputerze zależy od zainstalowanego oprogramowania. Użytkownik pracujący w Linuxie ma dostępne inne czcionki niż użytkownik Windowsów.

Każda platforma systemowa posiada własny zestaw czcionek, które są w danym systemie dostępne. W systemie Windows możemy przyjąć, że zestawem tym jest zestaw Core fonts for the Web wzbogacony o krój Tahoma — bezszeryfową czcionkę wykorzystaną w interfejsie Windows (w kolejnych wersjach Windowsów Tahoma ma być zastąpiona nową czcionką Segoe UI).

Zestawienie czcionek dostępnych w Linuxie oraz Macintoshu zawiera tabela 4.

lp. Rodzina Windows Macintosh Unix/Linux
1. szeryfowe Times New Roman, Georgia New York, Palatino, Times Bitstream Vera Serif, New Century Schoolbook, Times, Utopia
2. bezszeryfowe Arial, Verdana, Trebuchet MS, Tahoma Chrcoal, Chicago, Geneva, Helvetica, Lucida Grande Bitstream Vera Sans, Helvetica, Lucida
3. nieproporcjonalne Courier New, Andale Mono Courier, Monaco Bitstream Vera Mono, Courier

Tabela 4. Czcionki dostępne na różnych platformach

5. Krój i wielkość czcionki w CSS

5.1 Wybór czcionki

Czcionki stosowane na stronach WWW są wymienione w arkuszach stylów. Służą do tego atrybuty font:

p {
    font: bold 120% Arial, sans-serif;
}

oraz font-family:

p {
    font-family : Verdana, Helvetica, sans-serif;
}

Każdy z wpisów może zawierać dowolną liczbę czcionek, np.:

font-family : "Times New Roman", Georgia, Palatino, serif;
font-family : Verdana, Tahoma, Helvetica, 'Trebuchet MS', sans-serif;

W przypadku kilku wartości, przeglądarka zastosuje pierwszą, jaką znajdzie w systemie. Zauważ, że nazwy, które zawierają białe znaki, np. Times New Roman lub Trebuchet MS są ujęte w cudzysłów lub apostrofy. Nie jest to konieczne, choć specyfikacja CSS 2.1 wyraźnie to zaleca. Zwróć również uwagę, że nazwy czcionek oddzielamy przecinkami, a nie — jak w większości atrybutów — spacjami, np.:

border : 1px solid black;

Ostatnią podawaną wartością powinna być ogólna rodzina czcionek. Będzie ona stosowana przez przeglądarkę w przypadku, gdy żadna z wymienionych czcionek nie została odnaleziona w systemie. Dostępnymi rodzinami są:

Praktyczne znaczenie mają wyłącznie pierwsze trzy rodziny, tj. sans-serif, serif oraz monospace. Pozostałe rodziny, z racji na rozbieżności między systemami, nie są stosowane.

W jaki sposób wybierać krój czcionki na stronach WWW, by efekty były jak najbardziej przewidywalne? Wystarczy wymienić jedną z czcionek dostępnych na każdej z platform by mieć pewność, co do wyglądu strony.

Przykładami takich wpisów są:

p {
    font-family : Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
}

p {
    font-family : "Trebuchet MS", Geneva, Lucida, sans-serif;
}

p {
    font-family : Tahoma, "Lucida Grande", Helvetica, sans-serif;
}

Każdy z powyższych wpisów zawiera:

W odniesieniu do krojów szeryfowych możesz pisać:

p {
    font-family : Georgia, Palatino, Times, serif;
}

p {
    font-family : "Times New Roman", "New York", "Bitstream Vera Serif", serif;
}

Powyższe wpisy są bardzo często skracane do pary: czcionka z zestawu Core fonts for the Web oraz ogólnej rodziny. Na przykład:

p {
    font-family : Georgia, serif;
}

p {
    font-family : Verdana, sans-serif;
}

5.2 Rozmiar tekstu

Wielkość tekstu na stronach WWW powinna być podana w taki sposób, by użytkownik mógł zwiększyć lub zmniejszyć rozmiar czcionki przy użyciu opcji Widok → Rozmiar tekstu (w Firefoxie: skróty klawiszowe Ctrl+, Ctrl-, Ctrl+0). Narzuca to pewne ograniczenia odnośnie rozwiązań stosowanych w CSS.

Użycie jednostek px lub pt uniemożliwia modyfikację wielkości tekstu w Internet Explorerze. Z tego powodu, z jednostek tych należy zrezygnować.

Sądzę, że najlepszym wyjściem jest stosowanie rozwiązania podanego przez Dana Caderholma w pierwszym rozdziale książki pt. „Kuloodporne strony internetowe”. Należy ustalić wielkość bazową tekstu w odniesieniu do całego dokumentu stosując jedno ze słów kluczowych:

xx-small,
x-small,
small
medium,
large,
x-large,
xx-large

na przykład:

body {
    font-size : medium;
}

a następnie zmienić wielkość wybranych elementów witryny stosując wartości procentowe:

p {
    font-size : 110%;
}
h1 {
    font-size : 160%;
}
h2 {
    font-size : 120%;
}

Przy takim rozwiązaniu:

Wartość medium odpowiada czcionce 16px. Jest to wartość domyślna przeglądarek: IE 6, IE 7, FF 1.5, FF 2, Opera 7, Opera 9, Netscape 8.

Tabela 5 zawiera pełne zestawienie dostępnych słów kluczowych i odpowiadających im wielkości wyrażonych w pikselach. Zestawienie to przygotowałem badając zachowanie przeglądarek: IE 6, IE 7, FF 1.5, FF 2, Opera 7, Opera 9, Netscape 8.

lp. Słowo kluczowe piksele
1. xx-small 9px
2. x-small 10px
3. small 13px
4. medium 16px
5. large 18px
6. x-large 24px
7. xx-large 32px

Tabela 5. Rozmiar tekstu

6. Wszystkie atrybuty CSS dotyczące czcionek i tekstów

Poza poznanymi już atrybutami font, font-family oraz font-size, w CSS możesz zmienić kilka innych atrybutów tekstu.

Powszechnie stosowanymi są font-style, font-weight, text-align, text-decoration, text-indent oraz line-height.

Bardziej egzotycznymi są font-variant, text-transform, letter-spacing, word-spacing oraz white-space.

W specyfikacji CSS 2.1 wycofane zostały atrybuty font-size-adjust, font-stretch oraz text-shadow, które nigdy nie były w spójny sposób implementowane w przeglądarkach.

Pełne zestawienie atrybutów CSS 2.1 dotyczących czcionek i tekstu prezentuje tabela 5.

lp. Atrybut Opis
1. font Kilka cech kroju pisma
2. font-family Krój czcionki
3. font-size Rozmiar czcionki
4. font-style Krój pochylony lub normalny
5. font-variant Kapitaliki
6. font-weight Krój wytłuszczony lub normalny
7. text-align Wyrównanie poziome tekstu
8. text-decoration Podkreślenie, przekreślenie, nadkreślenie
9. text-indent Wcięcie akapitów
10. text-transform Przekształcenie tekstu
11. word-spacing Odstępy między wyrazami
12. letter-spacing Odstępy między literami
13. white-space Zachowanie białych znaków i zawijanie tekstu
14. line-height Wysokość interlinii

Tabela 6. Pełne zestawienie atrybutów CSS dotyczących czcionek i tekstów

6.1 font

Atrybut ten może zawierać wartości atrybutów: font-style, font-variant, font-weight, rozmiar font-size, ewentualnie wzbogacony o wysokość interlinii line-height oraz font-family. Przykłady użycia:

font : 80% sans-serif;
font : small Verdana, sans-serif;
font : italic 140% Georgia, serif;
font : bold 140%/200% Verdana, sans-serif;
font : bold italic large "Trebuchet MS", sans-serif;
font : bold small-caps medium serif;

Zapis 140%/200% oznacza tyle samo co:

font-size   : 140%;
line-height : 200%;

Nazwa kroju musi występować jako ostatnia. Poniższy przykład jest niepoprawny:

PRZYKŁAD NIEPOPRAWNY
font : "Trebuchet MS", sans-serif, 110%;

6.2 font-family

Specyfikacja rodziny czcionek. Najpewniejszą metodą jest ograniczenie stosowanych czcionek do zestawu podanego w tabeli 4. Wymieniając czcionki podajemy po jednej czcionce dla każdej platformy i dodajemy na końcu ogólną rodzinę czcionek:

font-family: Georgia, Palatino, Times, serif;

W powyższym przykładzie:

Skróconą metodą jest:

font : Georgia, serif;

W tym przypadku stosujemy czcionkę z zestawu Core fonts for the Web i podajemy ogólną rodzinę czcionek.

Są to dwie najpewniejsze metody specyfikowania czcionek na stronach WWW.

6.3 font-size

Rozmiar tekstu. Dostępne wartości możemy podzielić na pięć grup:

Przykłady użycia:

font-size : medium;
font-size : 120%;
font-size : 1.5em;

Wielkość bieżącego kroju jest dostępna poprzez jednostki em oraz ex. em jest szerokością litery m w danym kroju, zaś ex — wysokością litery x. Wykorzystując te jednostki możesz pisać:

font-size : 1.2em;
font-size : 0.8ex;

Jednostki em oraz ex pozwalają na definiowanie pudełek, których wymiary zależą od obszaru zajmowanego przez tekst:

width  : 8em;
height : 4ex;

Najlepszą obecnie metodą specyfikowania rozmiaru tekstu jest wspomniana już technika Dana Cederholma:

6.4 font-style

Styl kroju. Dostępne wartości

normal
italic

6.5 font-weight

Grubość czcionki. Dostępne wartości:

normal
bold

6.6 font-variant

Kapitaliki. Dostępne wartości:

normal
small-caps

6.7 text-align

Wyrównanie poziome tekstu. Dostępne wartości:

left
right
center
justify

6.8 text-decoration

Ozdabianie tekstu. Dostępne wartości:

none
underline
overline
line-through

6.9 text-indent

Wcięcie akapitu. Zazwyczaj stosowane są jednostki em:

text-indent : 2em;

6.10 text-transform

Przekształcenie tekstu. Dostępne wartości:

capitalize
uppercase
lowercase
none

6.11 word-spacing

Odstępny między wyrazami. Przykłady użycia:

word-spacing : 2em;
word-spacing : 200%;

6.12 letter-spacing

Odstępy między literami. Przykłady:

letter-spacing : 1em;
letter-spacing : 140%;

6.13 white-space

Zachowywanie białych znaków w tekście oraz zawijanie wierszy. Dostępne wartości:

normal
pre
nowrap
pre-wrap
pre-line

6.14 line-height

Wysokość wiersza tekstu. Przykłady:

line-height : 150%;
line-height : 1.8;

7. Osadzanie czcionek

Specyfikacja CSS 2 zawierała informacje o tym, w jaki sposób możemy osadzić czcionkę w dokumencie WWW. Osadzenie miało polegać na pobieraniu czcionek wraz ze stroną WWW. W ten sposób miał być ominięty problem dostępności różnych czcionek w różnych platformach.

Rozwiązanie takie nie przyjęło się, i zostało wycofane ze specyfikacji CSS 2.1. Wydaje mi się, że jednym z głównych powodów są prawa autorskie dotyczące czcionek. Osadzenie czcionek w dokumencie prowadziłoby w istocie do nieograniczonego rozpowszechniania czcionki. Nie mówiąc o tym, że po godzinie wędrowania po internecie mogłoby się okazać, że w systemie mamy zainstalowane tysiące czcionek (ten problem dałby się rozwiązać przy użyciu tymczasowego folderu na czcionki).

Osadzanie miało być realizowane następująco:

@font-face {
    font-family: "Adler";
    src: url("adler.ttf");
}

p {
    font-family: "Adler", sans-serif;
}

8. Ograniczenia dotyczące tekstów

Napisy umieszczane na stronach WWW w postaci tekstu formatowanego przy pomocy CSS podlegają wielu ograniczeniom. Po pierwsze zestaw dostępnych czcionek jest niewielki. Po drugie napisy takie mogą być wyłącznie poziome lub pionowe (liter i napisów nie możemy obracać). Po trzecie nie są dostępne żadne efekty graficzne.

Z tego powodu tam, gdzie typografia projektu jest istotna, należy posłużyć się obrazami.

8.1 Napisy jako obrazy (tła)

Na listingu 2 widoczny jest fragment kodu XHTML z tekstem opowiadania Jacka Londona pt. „The Call of the Wild” (ang. „Zew krwi”). W celu wykonania napisów nagłówkowych (tj. elementów h1, h2 oraz h3) dowolnym krojem czcionki należy:

Style CSS czterech pierwszych nagłówków są widoczne na listingu 3. Oczywiście tak wykonane napisy nie będą skalowane. Mogą również wystąpić problemy z dostępnością takich stron i indeksacją przez roboty. W chwili obecnej ukrywanie tekstu przed użytkownikiem wykonywane techniką zmniejszenia czcionki i pisania tekstu kolorem tła lub wykorzystujące atrybut display o wartości none nie są traktowane jako spam przez wyszukiwarki. Być może kiedyś jednak za takie zostaną uznane (podobnie jak to miało miejsce z różnymi technikami wklejania dużej ilości niewidocznego tekstu w HTML kilka lat temu).

Rysunki 12, 13 oraz 14 przedstawiają witrynę wykonaną tą techniką po zastosowaniu trzech różnych czcionek.

Zaletą podanego rozwiązania jest to, że webmaster nie jest w żaden sposób ograniczony odnośnie wyboru kroju czcionki i wykonywania przeróżnych efektów i ornamentów liter.

<h1 id="t1">The Call of the Wild</h1>
<h2 id="t2">by Jack London</h2>

<h3 id="t3">Chapter I</h3>
<h3 id="t4">Into the Primitive</h3>

<p>
Buck did not read...
</p>

<h3 id="t5">Chapter II</h3>
<h3 id="t6">The Law of Club and Fang</h3>

<p>
Buck's first day...
</p>

Listing 2. Strona WWW z tekstem opowiadania pt. „The Call of the Wild”

h1, h2, h3 {
    margin-top   : 10px;
    width        : 800px;
    height       : 100px;
    margin-left  : auto;
    margin-right : auto;
    text-align   : left;
    font-size    : 1px;
    color        : white;
    background   : no-repeat 50% 50%;
}

#t1 {
    background : url(bkg-1-14.png);
}

#t2 {
    background : url(bkg-2-14.png);
}

#t3 {
    background : url(bkg-3-14.png);
}

#t4 {
    background : url(bkg-4-14.png);
}

Listing 3. Style CSS opowiadania pt. „The Call of the Wild”

Rysunek 12. Czcionka crystalr.ttf w opowiadaniu pt. „Zew Krwi”

Rysunek 13. Czcionka gozilla.ttf w opowiadaniu pt. „Zew Krwi”

Rysunek 14. Czcionka blackadd.ttf w opowiadaniu pt. „Zew Krwi”