CSS @font-face-reglen

  • Forrige side
  • Næste side

Definition og brug

Ved brug af @font-face-reglen behøver webdesignere ikke længere at bruge nogen form for "sikkerhedsskrifttype".

I @font-face-reglen skal du først definere skrifttypens navn (f.eks. myFirstFont) og derefter pege på skriftfilen.

Tip:Skrifttypens URL skal være med små bogstaver. Store bogstaver kan føre til uventede resultater i IE!

For at bruge skrifttypen i HTML-elementer, referer til skrifttypens navn via font-family-attributten (myFirstFont):

div {
  font-family: myFirstFont;
}

Se også:

CSS vejledning:CSS Web skrift

Eksempel

Specificer en skrifttype med navnet "myFirstFont" og angiv URL'en, hvor den kan findes:

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

Prøv det selv

Du kan finde flere TIY eksempler nedenfor på siden.

CSS syntaks

@font-face {
  font-properties
}
skrifttypebeskrivelse værdi beskrivelse
font-family name påkrævet. Definer skrifttypens navn.
src URL påkrævet. Definer URL'en til download af skrifttypen.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Valgfri. Definerer, hvordan skriften skal strækkes. Standardværdi er "normal".
font-style
  • normal
  • italic
  • oblique
 Valgfri. Definerer skriftstilen. Standardværdi er "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Valgfri. Definerer skrifttykkelsen. Standardværdi er "normal".
unicode-range unicode-range Valgfri. Definerer det Unicode-tegnområde, som skriften understøtter. Standardværdi er "U+0-10FFFF".

Flere eksempler

Eksempel

Du skal tilføje en anden @font-face-regel, der indeholder beskrivelsen af fed tekst:

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

Prøv det selv

Filen "sansation_bold.woff" er en anden skrifttypefil, der indeholder Sansation skrifttypens fedde tegn.

Hver gang et stykke tekst, der skal vises som fed i skrifttypen "myFirstFont", bruges, bruger browseren det.

På den måde kan du sætte flere @font-face-regler til samme skrifttype.

Browserunderstøttelse

Internet Explorer, Firefox, Opera, Chrome og Safari understøtter @font-face-reglen.

Tabellets tal angiver den første browserversion, der fuldt ud understøtter skrifttypeformat.

Skrifttypeformat
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 Ikke understøttet Ikke understøttet Ikke understøttet 3.2 Ikke understøttet
EOT 6.0 Ikke understøttet Ikke understøttet Ikke understøttet Ikke understøttet

Edge og IE: Skrifttypeformat er kun gyldigt, når det er sat til "installable".

Firefox: Standardmæssigt deaktiveret, men kan aktiveres (flag skal sættes til "true" for at bruge WOFF2).

  • Forrige side
  • Næste side