CSS @font-face-regel
Definitie en gebruik
Door de @font-face-regel te gebruiken, hoeven webontwerpers niet langer te gebruiken van enige "veilige" lettertype.
In de @font-face-regel moet je eerst de naam van het lettertype definiëren (bijvoorbeeld myFirstFont) en vervolgens verwijzen naar het lettertypebestand.
Tip:De URL van het lettertype moet in kleine letters zijn. Hoofdletters kunnen onverwachte resultaten veroorzaken in IE!
Om een lettertype te gebruiken in een HTML-element, verwijz naar de naam van het lettertype via de property font-family (myFirstFont):
div {
font-family: myFirstFont;
}
Zie ook:
CSS-tutorial:CSS Web lettertype
Voorbeeld
Specificeer een lettertype genaamd "myFirstFont" en geef de URL op waar het te vinden is:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Meer TIY-exempels zijn te vinden onderin de pagina.
CSS-syntaxis
@font-face {
font-properties
}
| lettertype-aanduiding | waarde | beschrijving |
|---|---|---|
| font-family | name | verplicht. Definieer de naam van het lettertype. |
| src | URL | verplicht. Definieer de URL van het te downloaden lettertype. |
| font-stretch |
|
Optioneel. Definieer hoe het lettertype moet worden uitgerekt. Standaardwaarde is "normal". |
| font-style |
|
Optioneel. Definieer het stijltype van het lettertype. Standaardwaarde is "normal". |
| font-weight |
|
Optioneel. Definieer de dikte van het lettertype. Standaardwaarde is "normal". |
| unicode-range | unicode-range | Optioneel. Definieer het bereik van de Unicode-caractertalen die het lettertype ondersteunt. Standaardwaarde is "U+0-10FFFF". |
Meer voorbeelden
Voorbeeld
U moet een andere @font-face-regel toevoegen, die de beschrijver van het bold teksttype bevat:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Het bestand "sansation_bold.woff" is een ander lettertypebestand dat de bold karakters van het lettertype Sansation bevat.
Elke tekst die als bold moet worden weergegeven wanneer de lettertypefamilie "myFirstFont" is ingesteld, wordt door de browser gebruikt.
Op deze manier kunt u meerdere @font-face-regels voor hetzelfde lettertype instellen.
Browserondersteuning
Internet Explorer, Firefox, Opera, Chrome en Safari ondersteunen de @font-face-regel.
De cijfers in de tabel vermelden de eerste browserversie die de volledige ondersteuning voor lettertype-indeling biedt.
| Lettertype-indeling | |||||
|---|---|---|---|---|---|
| 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 | Niet ondersteund | Niet ondersteund | Niet ondersteund | 3.2 | Niet ondersteund |
| EOT | 6.0 | Niet ondersteund | Niet ondersteund | Niet ondersteund | Niet ondersteund |
* Edge en IE: Lettertype-indeling werkt alleen als het is ingesteld op "installable".
* Firefox: Uitgezet standaard, maar kan worden ingeschakeld (flag moet worden ingesteld op "true" om WOFF2 te kunnen gebruiken).
