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"
Przykład
#body {
font: 400 1rem/1.6 system-ui, sans-serif;
}
h1 {
font: 700 2rem/1.15 Georgia, serif;
}<h1 style="font: 700 28px/1.15 Georgia, serif; margin: 0 0 8px">Rozdział 1</h1>
<p style="font: 400 16px/1.6 system-ui, sans-serif; margin: 0">Treść w kroju systemowym, nagłówek w szeryfowym.</p>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
#font: <styl>? <wariant>? <grubość>? <rozmiar>[/<interlinia>]? <krój>;Wartości
#- Minimum: rozmiar i krój.
italic 600 20px/1.3 Georgia, serif
Styl, grubość, rozmiar z interlinią i krój.- Kapitaliki w kroju o stałej szerokości.
krój systemowy
Czcionka używana przez system w podpisach elementów interfejsu.
Wartości w praktyce
#16px sans-serif
.demo { font: 16px sans-serif; }italic 600 20px/1.3 Georgia, serif
.demo { font: italic 600 20px/1.3 Georgia, serif; }small-caps 18px monospace
.demo { font: small-caps 18px monospace; }caption
.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
#- font-familyWybiera krój pisma, z listą zapasowych krojów na wypadek braku pierwszego.
- font-sizeUstawia rozmiar czcionki.
- font-weightUstawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- line-heightUstawia wysokość linii tekstu, czyli odstęp między wierszami.
- font-styleWłącza kursywę lub pochylenie tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.