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 |
STYLE CZCIONEK
Większość czcionek posiada zróżnicowane style pośród tej samej rodziny, zazwyczaj pogrubioną i pochyłą, często również połączenie tych dwóch rodzajów, trochę rzadziej spotkać można małe kapitaliki i w niektórych przypadkach także wersje supercienkie/superpogrubione oraz rozciągnięte i zagęszczone.
Tabela przedstawiona poniżej pokazuje wiele różnych stylów. Jeśli nie posiadasz bardzo bogatej kolekcji czcionek, to wiele z tych wierszy będzie wyglądać tak samo.
Reguła | serif | sans-serif |
---|---|---|
Style | ||
font-style: normal |
Szybki… | Szybki… |
font-style: italic |
Szybki… | Szybki… |
font-style: oblique |
Szybki… | Szybki… |
Wagi | ||
font-weight: 100 |
Szybki… | Szybki… |
font-weight: 200 |
Szybki… | Szybki… |
font-weight: 300 |
Szybki… | Szybki… |
font-weight: normal |
Szybki… | Szybki… |
font-weight: 500 |
Szybki… | Szybki… |
font-weight: 600 |
Szybki… | Szybki… |
font-weight: bold |
Szybki… | Szybki… |
font-weight: 800 |
Szybki… | Szybki… |
font-weight: 900 |
Szybki… | Szybki… |
Odmiany | ||
font-variant: normal |
Szybki… | Szybki… |
font-variant: small-caps |
Szybki… | Szybki… |
Rozciągnięcie | ||
font-stretch: ultra-condensed |
Szybki… | Szybki… |
font-stretch: extra-condensed |
Szybki… | Szybki… |
font-stretch: condensed |
Szybki… | Szybki… |
font-stretch: semi-condensed |
Szybki… | Szybki… |
font-stretch: normal |
Szybki… | Szybki… |
font-stretch: semi-expanded |
Szybki… | Szybki… |
font-stretch: expanded |
Szybki… | Szybki… |
font-stretch: extra-expanded |
Szybki… | Szybki… |
font-stretch: ultra-expanded |
Szybki… | Szybki… |