CSS @font-face-regeln

Definition och användning

Genom att använda @font-face-regeln behöver webbdesigners inte längre använda någon "säkerhetsfont".

I @font-face-regeln måste du först definiera teckensnittets namn (t.ex. myFirstFont) och peka på teckenfilen.

Tips:Teckensnittets URL används i små bokstäver. Stora bokstäver kan ge oväntade resultat i IE!

För att använda teckensnittet i HTML-element, hänvisa till teckensnittets namn via font-family-egenskapen (myFirstFont):

div {
  font-family: myFirstFont;
}

Se också:

CSS-tutorial:CSS Web tecken

Exempel

Specificera ett teckensnitt med namnet "myFirstFont" och ange URL:en där det kan hittas:

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

Prova själv

Du kan hitta fler TIY-exempel längre ner på sidan.

CSS-syntax

@font-face {
  font-properties
}
teckensnittsbeskrivare värde beskrivning
font-family name obligatorisk. Definiera teckensnittets namn.
src URL obligatorisk. Definiera URL:en för att ladda ner teckensnittet.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Valfritt. Definiera hur tecknet skall streckas ut. Standardvärdet är "normal".
font-style
  • normal
  • italic
  • oblique
 Valfritt. Definiera typsnittsstilen. Standardvärdet är "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Valfritt. Definiera tecknets tjocklek. Standardvärdet är "normal".
unicode-range unicode-range Valfritt. Definiera Unicode-teckenomfattningen som stöds av tecknet. Standardvärdet är "U+0-10FFFF".

Mer exempel

Exempel

Du måste lägga till en annan @font-face-regel som innehåller beskrivningen av bold-texten:

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

Prova själv

Filen "sansation_bold.woff" är en annan typsnittsfil som innehåller Sansation typsnittets bold-tecken.

När ett stycke text som skall presenteras som bold när fontfamiljen "myFirstFont" är inställd, använder webbläsaren den.

På så sätt kan du sätta flera @font-face-regler för samma font.

Webbläsarstöd

Internet Explorer, Firefox, Opera, Chrome och Safari stöder @font-face-regeln.

Talen i tabellen anger den första webbläsaren som fullständigt stöder teckenformateringen.

Teckenformatering
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 Stöds inte Stöds inte Stöds inte 3.2 Stöds inte
EOT 6.0 Stöds inte Stöds inte Stöds inte Stöds inte

Edge och IE: Teckenformatering är endast giltig när den är satt till "installable".

Firefox: Förvalt är det inaktiverat, men kan aktiveras (kräver att flaggan sätts till "true" för att använda WOFF2).