CSS -weblettertypen
De CSS @font-face-regel
Met weblettertypen kunnen webontwerpers lettertypen gebruiken die niet op de computer van de gebruiker zijn geïnstalleerd.
Wanneer u het lettertype dat u wilt gebruiken hebt gevonden/gekocht, hoeft u alleen het lettertypebestand op uw webserver op te nemen en het zal indien nodig automatisch naar de gebruiker worden gedownload.
Uw "eigen" lettertypen worden gedefinieerd binnen de CSS- @font-faceregel.
Verschillende lettertype-indelingen
TrueType-lettertypen (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.
OpenType-lettertypen (OTF)
OpenType is een indeling voor schaalbare computerlettertypen. Het is gebouwd op TrueType en is een geregistreerd handelsmerk van Microsoft. OpenType-lettertypen worden tegenwoordig veel gebruikt op de belangrijkste computerplatforms.
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/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. U 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.
Browserondersteuning voor lettertype-indelingen
De cijfers in de tabel geven de eerste browserversie aan die het lettertypeformaat volledig ondersteunt.
| Font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: het lettertypeformaat werkt alleen als het is ingesteld op "installeerbaar".
Het lettertype gebruiken dat u wilt
In de @font-faceregel; definieer eerst een naam voor het lettertype (bijv. myFirstFont) en wijs vervolgens naar het lettertypebestand.
Tip: Gebruik altijd kleine letters voor de lettertype-URL. Hoofdletters kunnen onverwachte resultaten geven in IE.
Om het lettertype voor een HTML-element te gebruiken, raadpleegt u de naam van het lettertype (myFirstFont) via de font-familyeigenschap:
Voorbeeld
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Vetgedrukte tekst gebruiken
U moet nog een @font-faceregel toevoegen met beschrijvingen voor vetgedrukte tekst:
Voorbeeld
@font-face
{
font-family: myFirstFont;
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 lettertypefamilie "myFirstFont" vetgedrukt moet worden weergegeven.
Op deze manier kun je veel @font-faceregels hebben voor hetzelfde lettertype.
CSS-lettertypebeschrijvingen
De volgende tabel bevat alle lettertypedescriptors die binnen de @font-faceregel kunnen worden gedefinieerd:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |