W tej lekcji na warsztat weźmiemy font nazywany także czcionką :-). Poznasz takie właściwości jak:
Wielkość
Wielkość fontu ustalamy za pomocą font-size.
selektor { font-size: wartość; }Wielkość fontu możemy definiować w jednostkach względnych – em lub bezwzględnych – px. Wyższość fontuw jednostkach względnych polega na tym, że są one skalowalne natomiast bezwzględne mają stałą wielkość.
Jednostki względne są obliczane na podstawie wielkości czcionki rodzica.
p { font-size: 1.4em; }Wielkość bezwzględną fontu możemy określić także za pomocą:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Z kolei do określenia wielkości względnej fontu możemy posłużyć się poleceniami:
- smaller
- larger
Rodzaj
Rodzaj czcionki ustalamy za pomocą font-family.
selektor { font-family: wartość; }Możemy zastosować czcionki:
- szeryfowe (serif) – posiadają ozdobniki np. 'Times New Roman’, Georgia
- bezszeryfowe (sans-serif) – bez ozdobników np. Arial, Tahoma, Verdana
Deklarując styl fontu dobrze jest podać rodzinę czcionek na wypadek, jeśli użytkownik nie będzie dysponował którąś z wymienionych.
p { font-family: Times New Roman', Georgia, serif; }p { font-family: Arial, Tahoma, Verdana, sans-serif; }Przykład
To jest tekst pisany fontem szeryfowym.
Kolor czcionki
Kolor fontu uzyskamy poprzez nadanie akapitowi stylu color:
<p style="color: green;">Tekst koloru zielonego</p>Przykład
Tekst koloru zielonego
Wykaz podstawowych kolorów
- black (czarny)
- white (biały)
- red (czerwony)
- blue (niebieski)
- green (zielony)
- silver (srebrny)
- gray (szary)
- yellow (żółty)
- purple (purpurowy)
- maroon (kasztanowy)
- olive (oliwkowy)
- lime (limonkowy)
- aqua (morski)
- teal (teal)
- navy (granatowy)
Grubość
Grubość fontu ustalamy za pomocą font-weight.
selektor { font-weight: wartość; }Podstawowe wagi fontu:
- normal – standardowa (domyślna)
- bold – pogrubiona
p { font-weight: bold; }Przykład
Tekst pogrubiony.
Styl
Styl fontu ustalamy za pomocą font-style.
selektor { font-style: wartość; }Dostępne wartości stylu fontu:
- normal – standardowa (domyślna)
- italic – pochylona (kursywa) – odrębna wersja czcionki
- oblique – pochylona (kursywa) – pochylenie czcionki bez względu czy faktycznie taki krój istnieje
p { font-style: italic; }Przykład
Tekst pisany kursywą.
Wariant
Wariant fontu ustalamy za pomocą font-variant.
selektor { font-variant: wartość; }Dostępne wartości wariantu fontu
- normal – standardowa (domyślna)
- small-caps – kapitaliki
p { font-variant: small-caps; }Przykład
Tekst pisany kapitalikami.
Połączenie właściwości
Kilka właściwości w jednej deklaracji.
p { font: italic bold 1.8em serif; }Przykład
Teks z połączonymi właściwoaściami.