Font - CSS-triks | CSS-almanakk 2025

Den fonteiendom i CSS er en forkortelse eiendom som kombinerer alle de følgende under egenskaper i en enkelt erklæring.

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

Det er syv fontunderegenskaper, inkludert:

font-stretch: denne egenskapen angir skriftbredden, for eksempel kondensert eller utvidet.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: får teksten til å se kursiv eller skrå.
- normal
- italic
- oblique
- inherit
font-variant: endrer måltekst til små bokstaver.
- normal
- small-caps
- inherit
font-weight: angir vekt eller tykkelse på skrift.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: angir skriftens høyde.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definerer mengden plass over og under innebygde elementer.
- normal
- number (font-size multiplier)
- percentage
font-family: definerer skriften som brukes på elementet.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

Den fontegenskapen er ikke så enkelt som andre stenografi eiendommer, delvis på grunn av syntaks kravene for det, og delvis på grunn av arvespørsmål.

Her er et sammendrag av noen av tingene du bør vite når du bruker denne stenografiske eiendommen.

Obligatoriske verdier

To av verdiene i fontstenografi er obligatoriske: font-sizeog font-family. Hvis en av disse ikke er inkludert, vil hele erklæringen bli ignorert.

Dessuten font-familymå erklæres siste av alle verdier, ellers igjen, hele erklæringen vil bli ignorert.

Valgfrie verdier

Alle de fem andre verdiene er valgfrie. Hvis du inkluderer noen av font-style,, font-variantog font-weight, må de komme før font-sizei erklæringen. Hvis de ikke er det, vil de bli ignorert og kan også føre til at obligatoriske verdier blir ignorert.

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

I eksemplet ovenfor er tre valgfrie inkludert. Så lenge disse er definert før font-size, kan de plasseres i hvilken som helst rekkefølge.

Inkludering line-heighter også valgfritt, men kan kun erklæres etter font-sizeog bare etter en skråstrek:

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

I eksemplet ovenfor line-heighter "20px". Hvis du utelater line-height, må du også utelate skråstrek, ellers blir hele linjen ignorert.

Bruke font-stretch

Den font-stretchegenskapen er nytt i CSS3 så hvis den brukes i en eldre nettleser som ikke støtter font-stretchi fontstenografi, vil det føre til at hele linjen for å bli ignorert.

Spesifikasjonen anbefaler å inkludere et tilbakeslag uten font-stretch, som dette:

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

Arv for tilleggsutstyr

Hvis du utelater noen av de optiske verdiene (inkludert line-height), vil de utelatte valgene ikke arve verdiene fra det overordnede elementet, slik det ofte er tilfelle med typografiske egenskaper. I stedet blir de tilbakestilt til opprinnelig tilstand.

For eksempel:

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

I dette tilfellet plasseres de valgfrie verdiene (kursiv, små bokstaver og fet skrift) på fonterklæringen på elementet. Disse vil også gjelde for de fleste barneelementer.

Men fordi vi har deklarert fonteiendommen på avsnittelementene, tilbakestilles alle valgmulighetene til avsnittene, noe som fører til at stil, variant, vekt og linjehøyde går tilbake til de opprinnelige verdiene.

Nøkkelord for definering av systemfonter

I tillegg til syntaksen ovenfor fonttillater egenskapen også bruk av nøkkelord som verdier. De er:

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

Disse søkeordverdiene setter skriften til den som brukes i brukerens operativsystem for den aktuelle kategorien. For eksempel vil definere “bildetekst” sette skrifttypen på det elementet til å bruke den samme skrifttypen som brukes på operativsystemet for tekstede kontroller (knapper, rullegardin osv.).

Et enkelt nøkkelord består av hele verdien:

body ( font: menu; )

De andre egenskapene som er nevnt tidligere, er ikke gyldige i forbindelse med disse søkeordene. Disse nøkkelordene kan bare brukes med fontstenografi og kan ikke deklareres ved hjelp av noen av de enkelte langhåndseigenskapene.