Czionki (font) kurs CSS 3

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, czy monospace
• "rodzina czcionki" - czyli konkretny krój pisma, taki jak Arial lub Times

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.

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ą

Pogrubienie (font weight)

Aby uzyskać pogrubienie, należy wykorzystać właściwość font-weight.

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.

Rozmiar czcionki (font size)

Do zmiany rozmiaru czcionki słóży właściwość font-size:

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-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Wykorzystując formę skróconą, musisz podać font-size oraz font-family. Podanie pozostałych parametrów jest opcjonalne.