Font - CSS-Tricks | Almanah CSS 2025

fontProprietatea în CSS este o proprietate prescurtare care combină toate următoarele sub-proprietăți într - o singură declarație.

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; ) */

Există șapte fontsub-proprietăți, inclusiv:

font-stretch: această proprietate setează lățimea fontului, cum ar fi condensat sau extins.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: face ca textul să pară cursiv sau oblic.
- normal
- italic
- oblique
- inherit
font-variant: modifică textul țintă cu majuscule mici.
- normal
- small-caps
- inherit
font-weight: setează greutatea sau grosimea fontului.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: setează înălțimea fontului.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definește cantitatea de spațiu deasupra și dedesubtul elementelor în linie.
- normal
- number (font-size multiplier)
- percentage
font-family: definește fontul care se aplică elementului.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Stenografie Gotchas

fontProprietatea nu este la fel de simplă ca și alte proprietăți prescurtate, în parte din cauza cerințelor de sintaxă pentru ea, și în parte din cauza problemelor de moștenire.

Iată un rezumat al câtorva lucruri pe care ar trebui să le știți atunci când utilizați această proprietate de stenogramă.

Valori obligatorii

Două dintre valorile fontprescurtate sunt obligatorii: font-sizeși font-family. Dacă oricare dintre acestea nu este inclusă, întreaga declarație va fi ignorată.

De asemenea, font-familytrebuie să fie declarată ultima dintre toate valorile, altfel, din nou, întreaga declarație va fi ignorată.

Valori opționale

Toate celelalte cinci valori sunt opționale. Dacă includeți oricare dintre font-style,, font-variantși font-weight, acestea trebuie să apară înainte font-sizeîn declarație. Dacă nu sunt, vor fi ignorate și pot determina ignorarea valorilor obligatorii.

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

În exemplul de mai sus, sunt incluse trei opționale. Atâta timp cât acestea sunt definite anterior font-size, ele pot fi plasate în orice ordine.

Includerea line-heighteste, de asemenea, opțională, dar poate fi declarată numai după font-sizeși numai după o bară directă:

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

În exemplul de mai sus, line-heighteste „20px”. Dacă omiteți line-height, trebuie să omiteți și linia oblică, altfel întreaga linie va fi ignorată.

Folosind font-stretch

font-stretchProprietatea este nou în CSS3 , deci , dacă acesta este utilizat într - un browser mai vechi care nu acceptă font-stretchîn fontstenografie, aceasta va determina întreaga linie care urmează să fie ignorate.

Specificația recomandă includerea unei soluții alternative font-stretch, astfel:

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; )

Moștenirea opționalelor

Dacă omiteți oricare dintre valorile optianale (inclusiv line-height), opționalele omise nu vor moșteni valori din elementul lor părinte, așa cum se întâmplă adesea cu proprietățile tipografice. În schimb, vor fi resetați la starea inițială.

De exemplu:

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

În acest caz, valorile opționale (italic, cu majuscule și aldine) sunt plasate pe fontdeclarația de pe element. Acestea se vor aplica și majorității elementelor copil.

Cu toate acestea, deoarece am redeclarat fontproprietatea pe elementele de paragraf, toate opționalele vor fi resetate pe paragrafe, determinând ca stilul, varianta, greutatea și înălțimea liniei să revină la valorile lor inițiale.

Cuvinte cheie pentru definirea fonturilor de sistem

În plus față de sintaxa de mai sus, fontproprietatea permite și utilizarea cuvintelor cheie ca valori. Sunt:

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

Aceste valori ale cuvintelor cheie stabilesc fontul pe cel utilizat în sistemul de operare al utilizatorului pentru acea categorie specială. De exemplu, definirea „subtitrării” va seta fontul pe acel element pentru a utiliza același font care este utilizat pe sistemul de operare pentru controalele subtitrate (butoane, meniuri derulante etc.).

Un singur cuvânt cheie cuprinde întreaga valoare:

body ( font: menu; )

Celelalte proprietăți menționate anterior nu sunt valabile împreună cu aceste cuvinte cheie. Aceste cuvinte cheie pot fi utilizate numai cu fontstenogramă și nu pot fi declarate folosind niciuna dintre proprietățile individuale de mână lungă.