Czcionka - CSS-Tricks | Almanach CSS 2025

fontNieruchomość w CSS jest skróconą własnością, która łączy w sobie wszystkie następujące właściwości podrzędne w jednej deklaracji.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Istnieje siedem fontwłaściwości podrzędnych, w tym:

font-stretch: ta właściwość ustawia szerokość czcionki, np. zagęszczoną lub rozszerzoną.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: sprawia, że tekst jest pisany kursywą lub ukośnym.
- normal
- italic
- oblique
- inherit
font-variant: zmienia tekst docelowy na kapitaliki.
- normal
- small-caps
- inherit
font-weight: ustawia grubość lub grubość czcionki.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: ustawia wysokość czcionki.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: określa ilość miejsca nad i pod elementami liniowymi.
- normal
- number (font-size multiplier)
- percentage
font-family: określa czcionkę zastosowaną do elementu.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

fontNieruchomość nie jest tak prosta, jak innych właściwości skrót, częściowo ze względu na wymogi składni dla niego, a częściowo ze względu na kwestie dziedziczenia.

Oto podsumowanie niektórych rzeczy, które powinieneś wiedzieć, używając tej skróconej właściwości.

Obowiązkowe wartości

Dwie wartości w fontskrócie są obowiązkowe: font-sizei font-family. Jeśli którekolwiek z nich nie zostanie uwzględnione, cała deklaracja zostanie zignorowana.

Ponadto font-familymusi być zadeklarowana jako ostatnia ze wszystkich wartości, w przeciwnym razie cała deklaracja zostanie zignorowana.

Wartości opcjonalne

Wszystkie pięć pozostałych wartości jest opcjonalnych. Jeśli dołączysz którykolwiek z font-style, font-varianti font-weight, muszą one występować przed font-sizew deklaracji. Jeśli tak nie jest, zostaną zignorowane i mogą również spowodować zignorowanie wartości obowiązkowych.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

W powyższym przykładzie uwzględniono trzy opcje. Jeśli zostały one wcześniej zdefiniowane font-size, można je umieszczać w dowolnej kolejności.

Włączanie line-heightjest również opcjonalne, ale można je zadeklarować dopiero po font-sizeukośniku i tylko po nim:

body ( font: 44px/20px Georgia, sans-serif; )

W powyższym przykładzie line-heightjest to „20px”. Jeśli pominiesz line-height, musisz również pominąć ukośnik, w przeciwnym razie cała linia zostanie zignorowana.

Korzystanie z font-stretch

font-stretchObiekt jest nowy w CSS3, więc jeśli jest on stosowany w starszej przeglądarki, która nie obsługuje font-stretchw fontstenografii, spowoduje to cała linia być ignorowane.

Specyfikacja zaleca uwzględnienie rozwiązania zastępczego bez font-stretch, na przykład:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Dziedziczenie dla opcji

Jeśli pominiesz dowolną z wartości opcjonalnych (w tym line-height), pominięte opcje opcjonalne nie odziedziczą wartości z elementu nadrzędnego, jak to często ma miejsce w przypadku właściwości typograficznych. Zamiast tego zostaną zresetowane do stanu początkowego.

Na przykład:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

W tym przypadku opcjonalne wartości (kursywa, kapitaliki i pogrubienie) są umieszczane w fontdeklaracji elementu. Dotyczy to również większości elementów potomnych.

Jednakże, ponieważ ponownie zadeklarowaliśmy fontwłaściwość elementów akapitu, wszystkie opcje zostaną zresetowane w akapitach, powodując, że styl, wariant, waga i wysokość wiersza powrócą do swoich początkowych wartości.

Słowa kluczowe do definiowania czcionek systemowych

Oprócz powyższej składni fontwłaściwość umożliwia również użycie słów kluczowych jako wartości. Oni są:

caption
icon
menu
message-box
small-caption
status-bar

Te wartości słów kluczowych ustawiają czcionkę na czcionkę używaną w systemie operacyjnym użytkownika dla danej kategorii. Na przykład zdefiniowanie „podpisu” spowoduje ustawienie czcionki w tym elemencie tak, aby używała tej samej czcionki, która jest używana w systemie operacyjnym do obsługi podpisów (przycisków, menu rozwijanych itp.).

Jedno słowo kluczowe obejmuje całą wartość:

body ( font: menu; )

Inne właściwości wymienione wcześniej nie są prawidłowe w połączeniu z tymi słowami kluczowymi. Tych słów kluczowych można używać tylko ze fontskrótami i nie można ich zadeklarować przy użyciu żadnych indywidualnych właściwości odręcznych.