CSS @font-face-regeln

  • Föregående sida
  • Nästa sida

Definition och användning

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

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-lärobok: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

Fler TIY-exempel kan hittas nedan på sidan.

CSS-syntaks

@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 teckensnitt.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Valfritt. Definiera hur typsnittet skall sträckas. 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 typsnittets tjocklek. Standardvärdet är "normal".
unicode-range unicode-range Valfritt. Definiera den Unicode-teckenomfattning som typsnittet stöder. 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 bold-tecken för Sansation-typsnittet.

När ett stycke text som skall presenteras som bold när fonten är "myFirstFont" sätts, använder webbläsaren det.

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

Webbläsarstöd

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

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

Teckenformat
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: Teckenformat fungerar endast när det är satt till "installable".

Firefox: Standardmässigt inaktiverad, men kan aktiveras (flaggan måste sättas till "true" för att använda WOFF2).

  • Föregående sida
  • Nästa sida