CSS Web lettertypen
Met weblettertypen kunnen webontwerpers lettertypen gebruiken die niet op de computer van de gebruiker zijn geïnstalleerd.CSS @font-face
Wanneer je het lettertype dat je wilt gebruiken hebt gevonden, hoef je alleen het lettertypebestand op je server te zetten en het zal indien nodig automatisch naar de gebruiker worden gedownload.
Je "eigen" lettertypen worden gedefinieerd door gebruik te maken van de CSS @font-face regel.
Verschillende lettertype indelingen
TrueType-fonts (TTF)TrueType is een lettertypestandaard die eind jaren tachtig door Apple en Microsoft is ontwikkeld. TrueType is de meest voorkomende lettertype-indeling voor zowel het Mac OS als het Microsoft Windows besturingssysteem.
Het Web Open Font-formaat (WOFF)
WOFF is een lettertype-indeling voor gebruik in webpagina's. Het werd ontwikkeld in 2009 en is nu een W3C-aanbeveling. WOFF is in wezen OpenType of TrueType met compressie en aanvullende metadata. Het doel is om lettertypedistributie van een server naar een client te ondersteunen via een netwerk met bandbreedtebeperkingen.
Het Web Open Font-formaat (WOFF 2.0)
TrueType/OpenType lettertype dat betere compressie biedt dan WOFF 1.0.
SVG-lettertypen of vormen
Met SVG-lettertypen kan SVG worden gebruikt als glyphs bij het weergeven van tekst. De SVG 1.1 specificatie definieert een lettertypemodule waarmee lettertypen in een SVG-document kunnen worden gemaakt. Je kunt ook CSS toepassen op SVG-documenten en de regel @font-face kan worden toegepast op tekst in SVG-documenten.
Ingesloten OpenType-lettertypen (EOT)
EOT-lettertypen zijn een compacte vorm van OpenType-lettertypen die door Microsoft zijn ontworpen voor gebruik als ingesloten lettertypen op webpagina's.
Browser ondersteuning voor lettertype indelingen
De cijfers geven browserversie aan die het lettertypeformaat volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.
| Font Formaat |  |
 |
 |
 |
 |
| TTF/OTF |  |
|
|
|
|
| WOFF | |
|
|
|
|
| WOFF2 | |
|
|
|
|
| SVG |  |
|
|
|
|
| EOT | |
|
|
|
|
*IE: het lettertypeformaat werkt alleen als het is ingesteld op "installeerbaar".
Het lettertype gebruiken
In de@font-face regel definieer je eerst een naam voor het lettertype (bijv. mijnEersteFont) en wijs je vervolgens naar het lettertypebestand.
Om het lettertype voor een HTML element te gebruiken, geef je de naam van het lettertype (mijnEersteFont) via de font-family eigenschap op.
Voorbeeld:
@font-face {
font-family: mijnEersteFont;
src: url(sansation_light.woff);
}
div {
font-family: mijnEersteFont;
}
 |
Bij het verwijzen naar het lettertype bestand gebruik dan altijd kleine letters voor de URL. Hoofdletters kunnen onverwachte resultaten geven in Internet Explorer. |
Vetgedrukte tekst weergeven
Om nadruk te leggen op een woord dien je een extra regel met@font-face op te nemen met beschrijvingen voor vetgedrukte tekst.
Voorbeeld:
@font-face {
font-family: mijnEersteFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Het bestand "sansation_bold.woff" is een ander lettertypebestand, dat de vetgedrukte tekens voor het Sansation-lettertype bevat. Browsers zullen dit gebruiken wanneer een stuk tekst met de font-family "mijnEersteFont" vetgedrukt moet worden weergegeven.
