CSS beschrijving eigenschap font


Handleiding HTML Legenda | Voorbeelden | Lettertypen | CSS eigenschappen | Begin


font


CSS 1
IE 3.0
NN 4.0
MOZ 1.0
FF 1.0
OP 3.5
De font eigenschap combineert de verschillende stijleigenschappen voor lettertypen op een verkorte wijze.

Waarden: [ [<'font-style'> || <'font-variant'> || <'font-weight'>]? <'font-size'> [/<'line-height'>]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Beginwaarde: zie de afzonderlijke eigenschappen
Heeft betrekking op: alle elementen
Wordt geërfd: ja
Mediagroep(en): visual

Wanneer de afzonderlijke eigenschappen voor lettertypen gecombineerd worden, dan moeten in ieder geval waarden opgenomen worden voor font-size en font-family. Waarden voor de overige eigenschappen mogen ook worden weggelaten. Voor ontbrekende eigenschappen wordt de beginwaarde aangehouden (voor font-style, font-variant en font-weight is dat normal).
De volgorde waarin je de waarden opneemt is belangrijk. Wanneer je waarden voor één of meer van de eigenschappen font-style, font-varianten font-weight wilt gebruiken, dan neem je deze als eerste op (in welke volgorde dat gebeurt, maakt niet uit). Daarna volgt de waarde voor de font-size eigenschap en tenslotte de waarde voor de font-family eigenschap.
De waarde voor de font-size eigenschap kun je combineren met een waarde voor de line-height. Als scheidingsteken tussen de twee waarden voor gebruikt je een slash (/).

In plaats van de combinatie van waarden van de afzonderlijke eigenschappen, kun je ook één van de sleutelwoorden caption, icon, menu, message-box, small-caption of status-bar opnemen. De sleutelwoorden mogen niet samen met de andere waarden gebruikt worden.

Voorbeelden:

font: italic bold 24px/1.5 sans-serif

font: bold 1.2em "Times New Roman", Times, serif

font: message-box
<'font-style'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde font-style bepaalt of de tekst normaal, cursief of schuin naar rechts hellend moet worden weergegeven.
Zie voor een toelichting de beschrijving van de font-style eigenschap.
<'font-variant'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde font-variant bepaalt of kleine letters in de vorm van kleine hoofdletters moeten worden weergegeven.
Zie voor een toelichting de beschrijving van de font-variant eigenschap.
<'font-weight'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde font-weight bepaalt het gewicht van de letters.
Zie voor een toelichting de beschrijving van de font-weight eigenschap.
<'font-size'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde font-size bepaalt de grootte van de letters.
Zie voor een toelichting de beschrijving van de font-size eigenschap.
<'line-height'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde line-height bepaalt de minimale afstand tussen de basislijnen van de regels van een element.
Zie voor een toelichting de beschrijving van de line-height eigenschap.
<'font-family'>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde font-family bepaalt welk lettertype gebruikt moet worden bij de weergave van de tekst.
Zie voor een toelichting de beschrijving van de font-family eigenschap.
caption
CSS: 1 IE: 4.0 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als tekst voor captioned controls (bijvoorbeeld knoppen) op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
icon
CSS: 1 IE: 4.0 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als labels bij icons op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
menu
CSS: 1 IE: 4.0 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als tekst in menu's op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
message-box
CSS: 1 IE: 5.5 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als tekst in dialoogvensters op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
small-caption
CSS: 1 IE: 5.5 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als labels bij kleine controls op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
status-bar
CSS: 1 IE: 5.5 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 5.1

De tekst wordt op dezelfde wijze weergegeven als tekst in de statusbalk van vensters op het systeem van de bezoeker. De waarde bepaalt in één keer alle kenmerken van de tekst, dus het lettertype, de grootte, het gewicht, etc.
inherit
CSS: 2 IE: - NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 7.0

De waarde van het parent element wordt aangehouden.


Bijzonderheden ondersteuning

Algemeen
- Zie ook de beschrijving van de eigenschappen font-style, font-variant, font-weight, font-size, line-height en font-family. Hierna wordt alleen aangegeven waar de ondersteuning van de background eigenschap afwijkt van de ondersteuning van de afzonderlijke eigenschappen.
- De weergave van de tekst bij gebruik van de waarden caption, icon, menu, message-box, small-caption en status-bar is weinig uniform in de verschillende browsers.
Microsoft Internet Explorer 3.0
- Als geen waarde is opgenomen voor font-style, font-variant en/of font-weight wordt niet de beginwaarde (normal) van deze eigenschappen aangehouden, maar wordt de tekst weergegeven in de gebruikelijke (bijvoorbeeld Hx blijft vet) of geërfde stijl.
- Een getal als waarde voor font-weight wordt geïnterpreteerd als grootte in pixels en de tekst wordt daardoor zeer groot weergegeven.
Opera 3.5 t/m 5.1
- Als een combinatie van font-size en line-height is opgenomen, wordt de stijl gedefinieerd met de font eigenschap helemaal niet weergegeven.
Opera 6.0
- Een getal voor font-weight wordt niet ondersteund voor de elementen INPUT en TEXTAREA.



Legenda | Voorbeelden | Lettertypen | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 2 maart 2005