CSS @font-face- regel
Voorbeeld
Geef een lettertype op met de naam "myFirstFont", en geef de URL op waar het kan worden gevonden:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Met de @font-face
regel hoeven webdesigners geen van de "webveilige" lettertypen meer te gebruiken.
In de @font-face
regel moet u eerst een naam voor het lettertype definiëren (bijv. myFirstFont), en vervolgens naar het lettertypebestand verwijzen.
Om het lettertype voor een HTML-element te gebruiken, raadpleegt u de naam van het lettertype (myFirstFont) via de eigenschap font-family:
div
{
font-family: myFirstFont;
}
Browserondersteuning
De @font-face
regel wordt ondersteund in Edge, Chrome, Firefox, Safari en Opera.
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 |
*De lettertype-indeling werkt alleen als deze is ingesteld op "installeerbaar".
Syntaxis
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
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 value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Meer voorbeelden
Voorbeeld
U moet nog een @font-face-regel toevoegen met descriptoren voor vetgedrukte tekst:
@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 kunt u veel @font-face-regels voor hetzelfde lettertype hebben.
Gerelateerde pagina's
CSS-zelfstudie: CSS-weblettertypen