CSS @font-face-regel

Definitie en gebruik

Door de @font-face-regel te gebruiken, hoeven webontwerpers niet langer een "veilige" lettertype te gebruiken.

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 het lettertype te gebruiken op een HTML-element, verwijz naar de naam van het lettertype via de font-family-eigenschap (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);
}

Probeer het zelf

Meer TIY-exempels zijn te vinden onderaan de pagina.

CSS-syntaxis

@font-face {
  font-properties
}
lettertype-descriptor 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
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Optioneel. Definieer hoe het lettertype moet worden uitgerekt. Standaardwaarde is "normal".
font-style
  • normal
  • italic
  • oblique
 Optioneel. Definieer de stijl van het lettertype. Standaardwaarde is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optioneel. Definieer de dikte van het lettertype. Standaardwaarde is "normal".
unicode-range unicode-range Optioneel. Definieer het bereik van de Unicode-caractertabel dat 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 tekst bevat:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Probeer het zelf

Het bestand "sansation_bold.woff" is een ander lettertypebestand dat de bold karakters van het lettertype Sansation bevat.

Elke keer als een tekst die met de font-family "myFirstFont" is ingesteld, als bold moet worden weergegeven, gebruikt de browser deze.

Op deze manier kunt u meerdere @font-face-regels instellen voor hetzelfde lettertype.

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 is alleen geldig als deze is ingesteld op "installable".

* Firefox: Uitgaande is dit uitgeschakeld, maar kan worden ingeschakeld (flag moet worden ingesteld op "true" om WOFF2 te kunnen gebruiken).