CSS beschrijving eigenschap font-family


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


font-family


CSS 1
IE 3.0
NN 4.0
MOZ 1.0
FF 1.0
OP 3.5
De font-family eigenschap bepaalt welk lettertype gebruikt moet worden bij de weergave van de tekst.

Waarden: [ [<familie-naam> | <generieke font-familie>] [, <familie-naam> | <generieke font-familie>]* ] | inherit
Beginwaarde: hangt af van de (instellingen van de) browser
Heeft betrekking op: alle elementen
Wordt geërfd: nee
Mediagroep(en): visual

De waarde van de font-family eigenschap is een door komma's gescheiden lijst met één of meer familie-namen en/of generieke font-families. Een tweede lettertype wordt gebruikt, als het eerste niet aanwezig is op of ondersteund wordt door het systeem van de gebruiker.
Omdat altijd de kans bestaat dat een opgegeven lettertype niet beschikbaar is (bijvoorbeeld omdat op de verschillende systemen als Windows, Linux en Macintosh afwijken namen gebruikt worden), is het verstandig altijd als laatste een generieke font-familie op te nemen. Wanneer geen enkel opgegeven lettertype beschikbaar is, wordt het standaard lettertype van de browser gebruikt.

Voorbeelden:

font-family: "Times New Roman", serif

font-family: Arial, Helvetica, sans-serif
<familie-naam>
CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

Een familie-naam is de naam van een specifiek lettertype.
Bij het opgeven van familie-namen moet je er rekening mee houden, dat lettertypen lang niet altijd dezelfde naam hebben op de verschillende systemen. Op Windows systemen worden bijvoorbeeld standaard de lettertypen Arial, New Times Roman en Courier New geïnstalleerd. Op andere systemen hebben overeenkomstige lettertypen vaak de naam Helvetica, Times en Courier. Wanneer je een bijzonder lettertype wilt gebruiken, is bovendien de kans groot dat ook gebruikers van hetzelfde systeem er niet over beschikken. Om te voorkomen dat de browser van de bezoeker van je site zelf een alternatief voor een onbekend lettertype uitkiest, is het daarom verstandig altijd meerdere namen op te nemen met als laatste een generieke font-familie.

Namen waarin spaties voorkomen, moeten geplaatst worden tussen aanhalingstekens. In een stijlblok of extern stijlblad mag je zowel dubbele als enkele aanhalingstekens gebruiken, in een inline style zijn slechts enkele aanhalingstekens mogelijk.
<generieke
font-familie>

CSS: 1 IE: 3.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

Een generieke font-familie legt niet een specifiek lettertype vast, maar kenmerken waaraan het te gebruiken lettertype moet voldoen. De browser zoekt op het systeem van de bezoeker naar een lettertype dat over de betreffende kenmerken beschikt.

Er zijn vijf generieke font-families:
  • serif: een proportioneel lettertype (dat wil zeggen dat de breedte zich aanpast aan de letter: een i neemt dus minder ruimte in beslag dan een m) met schreef; bijvoorbeeld: Times New Roman, Times en Garamond;
  • sans-serif: een proportioneel lettertype zonder schreef; bijvoorbeeld: Arial, Futura, Helvetica en Verdana;
  • monospace: een niet-proportioneel lettertype (dat wil zeggen dat elke letter evenveel ruimte in beslag neemt); bijvoorbeeld: Courier New en Courier;
  • cursive: een lettertype dat handgeschreven tekst probeert na te bootsen; bijvoorbeeld: Brush Script, Comic Sans MS, Flemish Script en Zapf Chancery;
  • fantasy: een lettertype dat niet onder één van de andere generieke font-families valt; bijvoorbeeld: Allegro en Western.
De generieke font-families serif, sans-serif en monospace leveren op de meeste systemen een redelijk vergelijkbaar beeld op. Lettertypen die onder cursive en fantasy vallen verschillen daarentegen vaak behoorlijk van vorm, waardoor het nogal onvoorspelbaar is wat de bezoeker te zien krijgt. Voor cursive geldt daarnaast dat lang niet alle lettertypen die ertoe behoren goed leesbaar zijn op een beeldscherm en dat het minder zeker is dat een dergelijk lettertype op het systeem van de bezoeker aanwezig is. Spaarzaam gebruik van cursive en fantasy is dus aan te bevelen.
inherit
CSS: 2 IE: - NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde van het parent element wordt aangehouden.


Bijzonderheden ondersteuning

Microsoft Internet Explorer 3.0
- Wanneer meerdere lettertypen gedefinieerd zijn en het eerste lettertype niet beschikbaar is, wordt niet het tweede gebruikt maar het standaard lettertype van de browser. Het tweede of een volgend lettertype wordt wel gebruikt als het hele blok met lettertypen tussen aanhalingstekens wordt geplaatst. Dat is evenwel een constructie waarmee veel andere browsers niet overweg kunnen.
- Wanneer in een stijlregel de font-family eigenschap is opgenomen met meerdere lettertypen, worden stijlen gedefinieerd via erna geplaatste eigenschappen niet uitgevoerd. Dit probleem kan voorkomen worden door de font-family eigenschap als laatste in de stijlregel op te nemen.
- Enkele aanhalingstekens rond namen met spaties erin worden niet ondersteund bij een inline stijl (dubbele aanhalingstekens wel, maar die kunnen alleen gebruikt worden als de waarde van het STYLE attribuut tussen enkele aanhalingstekens geplaatst wordt).
- Indien er geen lettertype beschikbaar is dat overeenkomt met de waarde fantasy, wordt niet het standaard lettertype van de browser gebruikt, maar een cursive lettertype.
- Indien één van de waarden sans-serif, serif of monospace gedefinieerd is via de elementen Ul of LI, wordt in plaats van de markering een verticaal streepje weergegeven.
- De eigenschap wordt niet ondersteund voor elementen INPUT, OPTION, SELECT en TEXTAREA.
Microsoft Internet Explorer 4.0
- De eigenschap wordt niet ondersteund voor het OPTION element.
- De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
Microsoft Internet Explorer 5.0 t/m 6.0
- De eigenschap wordt niet ondersteund voor het OPTION element.
Netscape Navigator 4.x
- De waarden cursive en fantasy worden niet ondersteund.
- De eigenschap wordt niet ondersteund voor elementen TABLE en TR.
- Bij het LI element heeft de stijl geen betrekking op de tekst, maar alleen op de markering.
- De eigenschap wordt niet ondersteund voor elementen DT en DD.
- De eigenschap wordt niet ondersteund voor elementen OPTION, SELECT en TEXTAREA.
- Als de waarde inherit is opgenomen via een inline stijl, wordt het standaard lettertype van de browser aangehouden ook al is via een stijlblok of extern stijlblad een ander lettertype opgegeven.
- De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
Opera 3.5 t/m 4.0
- Wanneer meerdere lettertypen zijn opgenomen en het eerste lettertype onbekend is, wordt niet het tweede gebruikt, maar het standaard lettertype van de browser. Het tweede lettertype wordt alleen gebruikt als het onbekende lettertype tussen aanhalingstekens staat, ongeacht of het uit één of meerdere woorden bestaat.
- De eigenschap wordt niet ondersteund voor de elementen INPUT, OPTION, SELECT en TEXTAREA.
Opera 5.0 en hoger
- De eigenschap wordt niet ondersteund voor het OPTION element.



Legenda | Voorbeelden | Lettertypen | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 5 december 2004