W CSS właściwość font definiuje rodzaj czcionki, grubość i styl tekstu.
W arkuszach stylów, można wyróżnić następujące typy czcionek
- szeryfowe (ang. serif) - jest to czcionka, która posiada małe ozdobniki na końcu każdego znaku
- bezszeryfowe (ang. sans-serif) - jest to prosta czcionka bez ozdobników
- czcionki o stałej szerokości znaków (ang. monospace) - czcionka w której każdy znak jest tej samej szerokości. Może ona być zarówno szeryfowa jak i bezszeryfowa.
Rodzaj czcionki (font family)
W CSS możemy podzielić czcionki na
- czcionki generyczne - czyli grupy czcionek, takie jak
sans-serif,serif, czymonospace - "rodzina czcionki" - czyli konkretny krój pisma, taki jak
AriallubTimes
Rodzaj czcionki można ustawić za pomocą font-family. Dobrym zwyczajem jest podawanie kilku krojów czcionki,
wtedy jeżeli przeglądarka w jakimś systemie operacyjnym nie zna danego kroju pisma, to zastąpi go następnym.
Podczas ustawiania krojów, zacznij od czcionki, która najbardziej przypadła Ci do gustu, a definicję zakończ typem generycznym. Dzięki takiemu podejściu, będziesz miał pewność że czcionka szeryfowa nie zostanie zastąpiona bezszeryfową lub odwrotnie, w razie jej niedostępności na danym urządzeniu.
Poniżej znajduje się przykład, dokładnie pokazujący jak należy definować rodzaje czcionki. Jeżeli czcionka składa się z więcej niż jedneko członu, to należy umieścić jej nazwę w cudzysłowiach. Dodatkowe typy czcionek, można podawać po przecinku.
xxxxxxxxxx<html><head> <style> .serif { font-family: "Times New Roman", serif; } .sansserif { font-family: Arial, sans-serif; } .monospace { font-family: Courier, "Lucida Console", monospace; } </style></head><body> <h1>CSS font-family</h1> <p class="serif">Ten paragraf wykorzystuje czcionkę Times New Roman</p> <p class="sansserif">Ten paragraf wykorzystuje czcionkę Arial</p> <p class="monospace">Ten paragraf wykorzystuje czcionkę Courier. W CSS ma ona zdefiniowana alternatywną czcionkę Lucida Cosole oraz typ generyczny monospace.</p></body></html>Styl czcionky (font style)
Do ustawiania stylu czcionki służy font-style. Może ona przyjąć wartości:
- normal - czcionka bez dodatkowego stylu
- italic - czcionka pisana kursywą
xxxxxxxxxx<html><head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; } </style></head><body> <p class="normal">Paragraf ze stylem normalnym.</p> <p class="italic">Paragraf pisany kursywą.</p></body></html>Pogrubienie (font weight)
Aby uzyskać pogrubienie, należy wykorzystać właściwość font-weight.
xxxxxxxxxx<html><head> <style> p.normal { font-weight: normal; } p.bold { font-weight: bold; } </style></head><body> <p class="normal">Czcionka normalna.</p> <p class="bold">Czcionka pogrubiona.</p></body></html>Wariant czcionki (font variant)
Za pomocą właściwości font-variant, można uzyskać ciekawy efekt. Wszystkie małe litery, zostaną przekonwertowane na
wielkie litery, jednak o mniejszym rozmiarze czcionki.
xxxxxxxxxx<html><head> <style> p.normal { font-variant: normal; } p.small-caps { font-variant: small-caps; } </style></head><body> <p class="normal">Czcionka normalna.</p> <p class="small-caps">Czcionka ze zmienioną właściwością font-variant</p></body></html>Rozmiar czcionki (font size)
Do zmiany rozmiaru czcionki słóży właściwość font-size:
xxxxxxxxxx<html><head> <style> p.medium { font-size: 24px; } p.big { font-size: 48px; } </style></head><body> <p>Czcionka normalna.</p> <p class="medium">Czcionka o rozmiarze 24px</p> <p class="big">Czcionka o rozmiarze 48px</p></body></html>CSS font
Aby ustawić powyższe właściwości czcionki, możemy też skorzystać ze skróconej formy zapisu, jaką umożliwia właściwość font.
Kolejność w jakiej należy dokonać zapisu to:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Wykorzystując formę skróconą, musisz podać font-size oraz font-family. Podanie pozostałych parametrów jest opcjonalne.
xxxxxxxxxx<html><head> <style> .custom { font: 20px Arial, sans-serif; } </style></head><body> <h1>Nagłówek</h1> <p>Paragraf</p> <p class="custom">Paragraf ze zmienionymi stylami CSS.</p></body></html>