Właściwość CSSTypografia

font

Skrót ustawiający styl, grubość, rozmiar, interlinię i krój czcionki naraz.

Wartość domyślna
zgodnie z właściwościami składowymi
Dziedziczona
Tak
Animowalna
tak, tak jak właściwości składowe
Dotyczy
wszystkie elementy
JavaScript
element.style.font = "600 1rem/1.5 system-ui, sans-serif"
Na tej stronie

Przykład

#
CSS
body {
  font: 400 1rem/1.6 system-ui, sans-serif;
}

h1 {
  font: 700 2rem/1.15 Georgia, serif;
}
Podgląd

Definicja i zastosowanie

#

Właściwość font łączy kilka właściwości czcionki w jednej deklaracji: font-style, font-variant, font-weight, font-size, line-height i font-family. Rozmiar i krój są obowiązkowe, a interlinię podaje się po rozmiarze, po ukośniku: 16px/1.5.

Kolejność ma znaczenie: styl, wariant i grubość (w dowolnej kolejności) muszą być przed rozmiarem, a krój zawsze na końcu. Na przykład italic 600 1.25rem/1.4 Georgia, serif.

Skrót resetuje wszystkie pominięte składniki do wartości domyślnych. Jeśli wcześniej ustawiłeś pogrubienie, a potem napiszesz font: 16px sans-serif, pogrubienie zniknie.

Składnia

#
Składnia
font: <styl>? <wariant>? <grubość>? <rozmiar>[/<interlinia>]? <krój>;

Wartości

#

Wartości w praktyce

#

16px sans-serif

Minimum: rozmiar i krój.
.demo { font: 16px sans-serif; }

italic 600 20px/1.3 Georgia, serif

Styl, grubość, rozmiar z interlinią i krój.
.demo { font: italic 600 20px/1.3 Georgia, serif; }

small-caps 18px monospace

Kapitaliki w kroju o stałej szerokości.
.demo { font: small-caps 18px monospace; }

caption

Czcionka używana przez system w podpisach elementów interfejsu.
.demo { font: caption; }

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Uważaj, bo skrót zeruje pominięte części. Gdy zmieniasz tylko rozmiar, lepiej użyj samego font-size.
  • W skrócie interlinię piszesz po ukośniku zaraz po rozmiarze: 1rem/1.6.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.