Typsnitt - CSS-tricks | CSS Almanack 2025

Den fontegendom i CSS är en förkortning egenskap som kombinerar alla följande under egenskaper i en enda förklaring.

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 finns sju fontunderegenskaper, inklusive:

font-stretch: den här egenskapen ställer in teckensnittsbredden, t.ex. kondenserad eller utökad.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: gör att texten verkar kursiv eller sned.
- normal
- italic
- oblique
- inherit
font-variant: ändrar måltext till små bokstäver.
- normal
- small-caps
- inherit
font-weight: ställer in vikt eller tjocklek på teckensnittet.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: ställer in teckensnittets höjd.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definierar mängden utrymme över och under inbyggda element.
- normal
- number (font-size multiplier)
- percentage
font-family: definierar teckensnittet som tillämpas på elementet.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

Den fontegenskapen är inte så enkelt som andra stenografi egenskaper, delvis på grund av syntax kraven för det, och dels på grund av arvsfrågor.

Här är en sammanfattning av några av de saker du bör veta när du använder den här stenografiska egenskapen.

Obligatoriska värden

Två av värdena i fontstenografi är obligatoriska: font-sizeoch font-family. Om något av dessa inte ingår kommer hela deklarationen att ignoreras.

Dessutom font-familyska deklareras sist av alla värden, annars återigen hela förklaringen kommer att ignoreras.

Valfria värden

Alla fem andra värden är valfria. Om du inkluderar något av font-style,, font-variantoch font-weightmåste de komma före font-sizei deklarationen. Om de inte gör det kommer de att ignoreras och kan också leda till att obligatoriska värden ignoreras.

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

I exemplet ovan ingår tre alternativ. Så länge dessa har definierats tidigare font-sizekan de placeras i valfri ordning.

Inkludering line-heightär också valfritt men kan endast deklareras efter font-sizeoch endast efter en snedstreck:

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

I exemplet ovan line-heightär "20px". Om du utelämnar line-heightmåste du också utelämna snedstrecket, annars ignoreras hela raden.

Använda font-stretch

Den font-stretchegenskapen är nytt i CSS3 så om det används i en äldre webbläsare som inte stöder font-stretchi fontstenografi, kommer det att leda till att hela raden att ignoreras.

Specifikationen rekommenderar att du inkluderar en reserv utan font-stretch, så här:

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 för tillval

Om du utelämnar något av de optiska värdena (inklusive line-height) kommer de utelämnade optionerna inte att ärva värden från deras överordnade element, vilket ofta är fallet med typografiska egenskaper. Istället återställs de till sitt ursprungliga tillstånd.

Till exempel:

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

I det här fallet placeras de valfria värdena (kursiv, små bokstäver och fetstil) på fontdeklarationen på elementet. Dessa kommer också att gälla för de flesta underordnade element.

Eftersom vi har omdeklarerat fontegenskapen på styckeelementen kommer alla alternativ att återställas på styckena, vilket gör att stil, variant, vikt och radhöjd återgår till sina ursprungliga värden.

Nyckelord för att definiera systemteckensnitt

Förutom ovanstående syntax fonttillåter egenskapen också användning av nyckelord som värden. Dom är:

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

Dessa nyckelordsvärden ställer in teckensnittet till det som används i användarens operativsystem för just den kategorin. Om du till exempel definierar "bildtext" kommer teckensnittet på det elementet att använda samma typsnitt som används i operativsystemet för textningskontroller (knappar, rullgardinsmenyer, etc).

Ett enda sökord omfattar hela värdet:

body ( font: menu; )

De andra egenskaperna som nämnts tidigare är inte giltiga i kombination med dessa nyckelord. Dessa nyckelord kan endast användas med fontstenografi och kan inte deklareras med hjälp av någon av de enskilda långvariga egenskaperna.