Rodziny czcionek
Czcionka, zaraz po kolorze, jest prawdopodobnie najbardziej podstawową właściwością strony. W tym artykule nie pokażę żadnych "sztuczek", ale przedstawię jaki zakres wykorzystania czcionek umożliwia CSS.
Ponieważ nie wszystkie czcionki są dostępne na każdym komputerze (istnieją setki tysięcy czcionek i spora część z nich nie jest darmowa), CSS zapewnia system "awaryjny" (ang. fallback). Na początku wymieniasz czcionki, których chcesz używać, a później czcionki, których chciałbyś/chciałabyś użyć zamiast nich, jeśli te pierwsze nie są dostępne. Taka lista powinna być zakończona tzw. czcionką rodzajową (albo generyczną, ang. generic font), których jest pięć: serif, sans-serif, monospace, cursive oraz fantasy.
Poniższa tabela pokazuje przykłady różnych czcionek (Twoja przeglądarka może nie posiadać niektórych z nich). Możesz sprawdzić jak Twoja przeglądarka obsługuje każdy z typów rodzajowych.
| Font family | Your browser | Sample image |
|---|---|---|
| 'sans-serif': normalne czcionki szeryfowe | ||
Arial, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Helvetica, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Verdana, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Trebuchet MS, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Gill Sans, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Noto Sans, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Arial Narrow, sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
sans-serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | |
| 'serif': normalne czcionki bezszeryfowe | ||
Times, Times New Roman, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Didot, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Georgia, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Palatino, URW Palladio L, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Bookman, URW Bookman L, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
New Century Schoolbook, TeX Gyre Schola, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
American Typewriter, serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
serif
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | |
| 'monospace': czcionki o stałej szerokości | ||
Andale Mono, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Courier New, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Courier, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
FreeMono, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
OCR A Std, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
DejaVu Sans Mono, monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
monospace
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | |
| 'cursive': czcionki, który symulują pismo odręczne | ||
Comic Sans MS, Comic Sans, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Apple Chancery, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Bradley Hand, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Brush Script MT, Brush Script Std, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Snell Roundhand, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
URW Chancery L, cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
cursive
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | |
| 'fantasy': ozdobne czcionki, dobre dla tytułów, itd. | ||
Impact, fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Luminari, fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Jazz LET, fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Marker Felt, fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
Trattatello, fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | 
|
fantasy
| Szybki Brązowy Lis Przeskakuje Nad Leniwym Psem | |
