Własność CSS font

Własność CSS font to własność zbiorcza umożliwiająca ustawienie siedmiu właściwości pisma elementu HTML na raz lub pozwalająca wybrać jeden font systemowy (czcionkę systemową). W pierwszym zastosowaniu obejmuje ona następujące własności indywidualne:

• font-style
• font-variant (w zakresie CSS 2.1)
• font-weight
• font-width (dawniej font-stretch) – w zakresie CSS Fonts, poziom 3
• font-size
• line-height
• font-family

Z powodów historycznych związanych z kompatybilnością własność zbiorcza font nie obsługuje w pełni dwóch obejmowanych przez siebie własności indywidualnych. W przypadku własności font-variant obsługuje tylko wartości zdefiniowane w CSS 2.1, a w przypadku font-width – tylko wartości zdefiniowane dla font-stretch w CSS Fonts, poziom 3. Szczegółowe informacje na ten temat znajdują się poniżej.

Należy też pamiętać, że choć własność font pozwala na ustawienie tylko kilku własności, to niejawnie sprowadza do ustawień domyślnych wiele innych ustawień fontów. Poniżej znajduje się lista własności indywidualnych, którym własność font niejawnie nadaje wartość domyślną:

• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size-adjust
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings

Wartości i składnia

Jako wartość własność font przyjmuje pojedyncze słowo kluczowe określające font systemowy lub listę wartości odpowiadających obejmowanym przez siebie własnościom indywidualnym.

Fonty systemowe

Fonty systemowe można wybierać za pomocą następujących słów kluczowych:

caption

Font używany przez system w etykietach elementów interfejsu użytkownika, takich jak przyciski, listy rozwijane itd.

icon

Font używany przez system na ikonach.

menu

Font używany przez system w menu, takich ja menu rozwijane, listy menu itd.

message-box

Font używany przez system w oknach dialogowych.

small-caption

Font używany przez system na małych kontrolkach.

status-bar

Font używany przez system na paskach stanu okien.

Wybór fontu systemowego oznacza wybranie wszystkich jego standardowych ustawień stosowanych w systemie na raz. Później te ustawienia można zmienić za pomocą wybranych własności indywidualnych, np.:

p {
  font: message-box;
  font-weight: bold;
}

Ta reguła najpierw ustawia dla akapitów font używany przez system w oknach dialogowych, a następnie pogrubia pismo.

Wartości indywidualne

Poniżej znajduje się formalny zapis tej części składni własności font, która odnosi się do własności indywidualnych:

[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

Z tego zapisu wynikają następujące zasady:

• Własności font-size i font-family są obowiązkowe.
• Pozostałe własności (font-style, font-variant, font-weight, font-width i line-height) są opcjonalne.
• Wartości własności font-style, font-variant, font-weight i font-width muszą znajdować się przed wartością własności font-size.
• Własność font-variant może mieć tylko jedną z wartości zdefiniowanych w CSS 2.1: normal lub small-caps.
• Własność font-width może mieć tylko jedną z wartości zdefiniowanych w CSS Fonts, poziom 3: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
• Wartość własności line-height musi znajdować się bezpośrednio za wartością własności font-size i musi być od niej oddzielona ukośnikiem /.
• Wartość własności font-family powinna być ostatnia.

Poniżej znajduje się przykładowa deklaracja własności font zawierająca maksymalny zestaw wartości:

font: italic small-caps bold ultra-expanded 24px/1.8 Inconsolata;

Ta deklaracja ustawia kursywę, kapitaliki, pogrubienie, ultraszerokie litery, rozmiar 24 piksele i odstęp między wierszami 1,8 dla tekstu pisanego krojem Inconsolata.

Zastosowanie

Własność CSS font ma zastosowanie do wszystkich elementów HTML.

Podsumowanie