Lettertype - CSS-trucs | CSS Almanac 2025

De fonteigenschap in CSS is een verkorte eigenschap die alle volgende subeigenschappen in één declaratie combineert.

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

Er zijn zeven fontsub-eigenschappen, waaronder:

font-stretch: deze eigenschap stelt de lettertypebreedte in, zoals gecomprimeerd of uitgebreid.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: laat de tekst cursief of schuin lijken.
- normal
- italic
- oblique
- inherit
font-variant: verandert de doeltekst in kleine hoofdletters.
- normal
- small-caps
- inherit
font-weight: stelt het gewicht of de dikte van het lettertype in.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: stelt de hoogte van het lettertype in.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definieert de hoeveelheid ruimte boven en onder inline-elementen.
- normal
- number (font-size multiplier)
- percentage
font-family: definieert het lettertype dat op het element wordt toegepast.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Lettertype Shorthand Gotchas

De fonteigenschap is niet zo eenvoudig als andere steno-eigenschappen, deels vanwege de syntaxisvereisten ervoor, en deels vanwege overervingsproblemen.

Hier is een samenvatting van enkele dingen die u moet weten wanneer u deze steno-eigenschap gebruikt.

Verplichte waarden

Twee van de waarden in fontsteno zijn verplicht: font-sizeen font-family. Als een van deze niet is opgenomen, wordt de volledige aangifte genegeerd.

Ook font-familymoet de laatste van alle waarden worden verklaard, anders is, nogmaals, de hele verklaring zal worden genegeerd.

Optionele waarden

Alle vijf de andere waarden zijn optioneel. Als u een van de font-style, font-varianten font-weightopneemt, moeten deze eerder font-sizein de aangifte voorkomen. Als dat niet het geval is, worden ze genegeerd en kunnen de verplichte waarden ook worden genegeerd.

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

In het bovenstaande voorbeeld zijn drie opties inbegrepen. Zolang deze vooraf zijn gedefinieerd font-size, kunnen ze in elke volgorde worden geplaatst.

Opnemen line-heightis eveneens optioneel, maar kan alleen worden aangegeven na font-sizeen alleen na een schuine streep:

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

In het bovenstaande voorbeeld is de line-height"20px". Als u weglaat line-height, moet u ook de schuine streep weglaten, anders wordt de hele regel genegeerd.

Font-stretch gebruiken

Het font-stretchpand is nieuw in CSS3, dus als het wordt gebruikt in een verouderde browser die niet ondersteunt font-stretchin fontsteno, zal het ertoe leiden dat de gehele lijn te worden genegeerd.

De specificatie beveelt aan om een fallback zonder op te nemen font-stretch, zoals deze:

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

Overerving voor optionals

Als u een van de optische waarden weglaat (inclusief line-height), zullen de weggelaten opties geen waarden erven van hun bovenliggende element, zoals vaak het geval is met typografische eigenschappen. In plaats daarvan worden ze teruggezet naar hun oorspronkelijke staat.

Bijvoorbeeld:

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

In dit geval worden de optionele waarden (cursief, small-caps en vetgedrukt) op de fontdeclaratie van het element geplaatst. Deze zijn ook van toepassing op de meeste onderliggende elementen.

Omdat we de fonteigenschap voor de alinea-elementen echter opnieuw hebben gedeclareerd , worden alle opties op de alinea's opnieuw ingesteld, waardoor de stijl, variant, dikte en regelhoogte terugkeren naar hun oorspronkelijke waarden.

Sleutelwoorden voor het definiëren van systeemlettertypen

Naast de bovenstaande syntaxis staat de fonteigenschap ook het gebruik van trefwoorden als waarden toe. Zij zijn:

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

Deze trefwoordwaarden stellen het lettertype in op het lettertype dat wordt gebruikt op het besturingssysteem van de gebruiker voor die specifieke categorie. Als u bijvoorbeeld "caption" definieert, wordt het lettertype voor dat element ingesteld om hetzelfde lettertype te gebruiken dat op het besturingssysteem wordt gebruikt voor besturingselementen voor ondertiteling (knoppen, vervolgkeuzemenu's, enz.).

Een enkel trefwoord omvat de volledige waarde:

body ( font: menu; )

De andere eerder genoemde eigenschappen zijn niet geldig in combinatie met deze trefwoorden. Deze sleutelwoorden kunnen alleen worden gebruikt met fontsteno en kunnen niet worden gedeclareerd met behulp van een van de individuele longhand-eigenschappen.