Skrifttype - CSS-tricks | CSS Almanak 2025

Den fontejendom i CSS er en forkortelse ejendom, der kombinerer alle de følgende sub-egenskaber 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; ) */

Der er syv fontunderejendomme, herunder:

font-stretch: denne egenskab indstiller skrifttypebredden, f.eks. kondenseret eller udvidet.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: gør teksten til kursiv eller skrå.
- normal
- italic
- oblique
- inherit
font-variant: ændrer måltekst til små bogstaver.
- normal
- small-caps
- inherit
font-weight: indstiller vægten eller tykkelsen på skrifttypen.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: indstiller skrifttypens højde.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definerer mængden af plads over og under inline-elementer.
- normal
- number (font-size multiplier)
- percentage
font-family: definerer den skrifttype, der anvendes på elementet.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

Den fontegenskab er ikke så ligetil, som andre stenografi egenskaber, dels på grund af de syntaks krav til det, og dels på grund af arv spørgsmål.

Her er et resumé af nogle af de ting, du bør vide, når du bruger denne stenografiske ejendom.

Obligatoriske værdier

To af værdierne i fontstenografi er obligatoriske: font-sizeog font-family. Hvis en af disse ikke er inkluderet, ignoreres hele erklæringen.

Også, font-familyskal erklæres sidste af alle værdier, ellers igen, hele erklæring vil blive ignoreret.

Valgfri værdier

Alle de fem andre værdier er valgfri. Hvis du inkluderer noget af font-style,, font-variantog font-weight, skal de komme før font-sizei erklæringen. Hvis de ikke er det, ignoreres de og kan også medføre, at de obligatoriske værdier ignoreres.

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

I ovenstående eksempel er tre valgmuligheder inkluderet. Så længe disse er defineret før font-size, kan de placeres i en hvilken som helst rækkefølge.

Inkludering line-heighter ligeledes valgfri, men kan kun erklæres efter font-sizeog kun efter en skråstreg:

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

I ovenstående eksempel line-heighter "20px". Hvis du udelader line-height, skal du også udelade skråstreg, ellers ignoreres hele linjen.

Brug af font-stretch

Den font-stretchegenskab er nyt i CSS3, så hvis det anvendes i en ældre browser, der ikke understøtter font-stretchi fontstenografi, vil det medføre, at hele linjen til at blive ignoreret.

Specifikationen anbefaler at inkludere et tilbagefald uden 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 til optioner

Hvis du udelader nogen af de optiske værdier (inklusive line-height), arver de udeladte optionals ikke værdier fra deres overordnede element, som det ofte er tilfældet med typografiske egenskaber. I stedet nulstilles de til deres oprindelige tilstand.

For eksempel:

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

I dette tilfælde placeres de valgfri værdier (kursiv, små bogstaver og fed) på fonterklæringen på elementet. Disse gælder også for de fleste underordnede elementer.

Men fordi vi har deklareret fontejendommen på afsnitselementerne, nulstilles alle valgmulighederne i afsnitene, hvilket får stilen, varianten, vægten og linjehøjden til at vende tilbage til deres oprindelige værdier.

Nøgleord til definition af systemskrifttyper

Ud over ovenstående syntaks fonttillader egenskaben også brug af nøgleord som værdier. De er:

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

Disse nøgleordsværdier indstiller skrifttypen til den, der bruges i brugerens operativsystem til den pågældende kategori. For eksempel definerer "billedtekst" skrifttypen på dette element til at bruge den samme skrifttype, som bruges på operativsystemet til billedtekster (knapper, drop-down osv.).

Et enkelt nøgleord omfatter hele værdien:

body ( font: menu; )

De andre tidligere nævnte egenskaber er ikke gyldige i forbindelse med disse nøgleord. Disse nøgleord kan kun bruges med fontstenografi og kan ikke erklæres ved hjælp af nogen af de enkelte langhåndsejendomme.