Kurs HTML

Wprowadzenie: Skrócony zapis stylów czcionki

W poprzednich lekcjach poznaliśmy wiele indywidualnych właściwości służących do stylizowania tekstu: font-style, font-variant, font-weight, font-size, line-height i font-family.

CSS oferuje również właściwość zbiorczą (shorthand) font, która pozwala ustawić większość z tych właściwości w jednej deklaracji. Użycie skróconego zapisu może uczynić kod CSS bardziej zwięzłym, ale wymaga ścisłego przestrzegania określonej składni i kolejności wartości.

Składnia właściwości font

Składnia właściwości font jest dość rygorystyczna. Musi zawierać co najmniej wartości dla font-size i font-family. Pozostałe wartości są opcjonalne, ale jeśli są używane, muszą występować w określonej kolejności.

Pełna składnia (zgodnie ze specyfikacją):

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>Kopiuj

Rozbijając to na części:

1. Opcjonalnie: Dowolna kombinacja font-style, font-variant, font-weight (w dowolnej kolejności przed font-size). Jeśli pominięte, przyjmą swoje wartości początkowe (normal).
2. Wymagane: font-size.
3. Opcjonalnie: line-height, poprzedzone ukośnikiem (/) i spacją. Jeśli pominięte, line-height przyjmie wartość normal.
4. Wymagane: font-family (lista czcionek lub rodzin ogólnych).

Przykłady:

/* Minimalny wymagany zapis: font-size i font-family */
p {
  font: 1rem sans-serif; 
}

/* Dodanie wagi */
h1 {
  font: bold 2.5rem serif;
}

/* Dodanie stylu i wagi */
em {
  font: italic bold 1em Georgia, serif;
}

/* Dodanie wagi i wysokości linii */
body {
  font: 400 16px / 1.6 Arial, sans-serif;
}

/* Pełny przykład z wariantem, stylem, wagą, rozmiarem, wysokością linii i rodziną */
.specjalny {
  font: italic small-caps bold 1.2rem / 1.5 "Palatino Linotype", serif;
}

/* Równoważny zapis indywidualnymi właściwościami dla .specjalny: */
.specjalny-indywidualnie {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: "Palatino Linotype", serif;
}Kopiuj

Resetowanie wartości

Ważną cechą właściwości zbiorczych, takich jak font, jest to, że **resetują one wszystkie pominięte właściwości składowe do ich wartości początkowych (initial values)**.

Na przykład, jeśli wcześniej ustawiłeś font-weight: bold; dla elementu, a następnie użyjesz skróconego zapisu font: 1rem sans-serif; (bez podania wagi), to font-weight zostanie zresetowane do wartości początkowej, czyli normal (400).

p {
  font-weight: bold; /* Ustawienie pogrubienia */
  color: blue;
}

/* ... później w kodzie ... */
p.normalny {
  /* Użycie skrótu font resetuje font-weight do normal! */
  font: 1rem sans-serif; 
}

/* Efekt dla p.normalny: */
/* font-style: normal; */
/* font-variant: normal; */
/* font-weight: normal; <---- ZRESETOWANE! */
/* font-size: 1rem; */
/* line-height: normal; */
/* font-family: sans-serif; */
/* color: blue; (color nie jest częścią skrótu font, więc pozostaje) */Kopiuj

Dlatego należy ostrożnie używać właściwości zbiorczej font, zwłaszcza jeśli chcemy zmodyfikować tylko jedną lub dwie właściwości czcionki, zachowując pozostałe. W takich przypadkach często bezpieczniej jest używać indywidualnych właściwości.

Wartości systemowe dla font

Oprócz standardowej składni, właściwość font może również przyjmować specjalne słowa kluczowe, które odnoszą się do czcionek systemowych używanych przez interfejs użytkownika systemu operacyjnego. Są to:

• caption: Czcionka używana dla podpisów kontrolek (np. przycisków).
• icon: Czcionka używana dla etykiet ikon.
• menu: Czcionka używana w menu.
• message-box: Czcionka używana w oknach dialogowych.
• small-caption: Czcionka używana dla małych podpisów kontrolek.
• status-bar: Czcionka używana na pasku stanu.

Użycie tych wartości sprawia, że element przyjmuje wszystkie właściwości czcionki (rodzinę, rozmiar, wagę, styl itp.) zdefiniowane przez system operacyjny dla danego elementu interfejsu.

button.systemowy {
  font: caption; /* Przycisk będzie wyglądał jak natywny przycisk systemu */
}

.menu-aplikacji {
  font: menu;
}Kopiuj

Użycie tych słów kluczowych jest stosunkowo rzadkie w nowoczesnym web designie, który dąży do spójnego wyglądu niezależnie od systemu, ale może być przydatne w specyficznych przypadkach, np. przy tworzeniu aplikacji webowych imitujących natywny wygląd systemu.