CSS web skrifttyper

Indholdsfortegnelse

CSS @font-face-reglen

Webskrifttyper giver webdesignere mulighed for at bruge skrifttyper, der ikke er installeret på brugerens computer.

Når du har fundet/købt den skrifttype, du ønsker at bruge, skal du blot inkludere skrifttypen fil på din webserver, og den vil automatisk blive downloadet til brugeren, når det er nødvendigt.

Dine "egne" skrifttyper er defineret i CSS @font-face reglen.

Forskellige skrifttypeformater

TrueType-skrifttyper (TTF)

TrueType er en skrifttypestandard udviklet i slutningen af 1980'erne af Apple og Microsoft. TrueType er det mest almindelige skrifttypeformat til både Mac OS og Microsoft Windows-operativsystemer.

OpenType Fonts (OTF)

OpenType er et format til skalerbare computerskrifttyper. Det blev bygget på TrueType, og er et registreret varemærke tilhørende Microsoft. OpenType-skrifttyper bruges i dag almindeligvis på de store computer platforme.

The Web Open Font Format (WOFF)

WOFF er et skrifttypeformat til brug på websider. Det blev udviklet i 2009, og er nu en W3C-anbefaling. WOFF er i det væsentlige OpenType eller TrueType med komprimering og yderligere metadata. Målet er at understøtte skrifttypedistribution fra en server til en klient over et netværk med båndbreddebegrænsninger.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType skrifttype, der giver bedre komprimering end WOFF 1.0.

SVG-skrifttyper/former

SVG-skrifttyper gør det muligt at bruge SVG som glyffer ved visning af tekst. SVG 1.1 specifikation definere et skrifttypemodul, der tillader oprettelse af skrifttyper inden for en SVG-dokument. Du kan også anvende CSS på SVG-dokumenter og @font-face-reglen kan anvendes på tekst i SVG-dokumenter.

Embedded OpenType Fonts (EOT)

EOT-skrifttyper er en kompakt form for OpenType-skrifttyper designet af Microsoft til brug som indlejrede skrifttyper på websider.

Browserunderstøttelse af skrifttypeformater

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter skrifttypeformat.

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

*IE: Skrifttypeformatet virker kun, når det er indstillet til at være "installerbart".

Brug af den skrifttype, du ønsker

I reglen @font-face; definer først et navn til skrifttypen (f.eks. myFirstFont) og peg derefter på skrifttypefilen.

Tip: Brug altid små bogstaver til skrifttypens webadresse. Store bogstaver kan give uventede resultater i IE.

For at bruge skrifttypen til et HTML-element skal du se navnet på skrifttypen (myFirstFont) gennem egenskaben font-family:

Eksempel

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

div
{
   
font-family: myFirstFont;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Brug af fed tekst

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

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

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

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

Filen "sansation_bold.woff" er en anden skrifttypefil, som indeholder fed skrifttegn for Sansation fonten.

Browsere vil bruge dette, når et stykke tekst med skrifttypefamilien "myFirstFont" skal gengives som fed.

På denne måde kan du have mange @font-face regler for den samme skrifttype.

CSS-skrifttypebeskrivelser

Følgende tabel viser alle de skrifttypebeskrivelser, der kan defineres i reglen @font-face:

Beskrivelse:

font-family

Værdier:

name

Beskrivelse:

Påkrævet. Definerer et navn til skrifttypen

Beskrivelse:

src

Værdier:

URL

Beskrivelse:

Påkrævet. Definerer skrifttypefilens URL

Beskrivelse:

font-stretch

Værdier:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Beskrivelse:

Valgfri. Definerer, hvordan skrifttypen skal strækkes. Standard er "normal"

Beskrivelse:

font-style

Værdier:

normal
italic
oblique

Beskrivelse:

Valgfri. Definerer, hvordan skrifttypen skal styles. Standard er "normal"

Beskrivelse:

font-weight

Værdier:

normal
bold
100
200
300
400
500
600
700
800
900

Beskrivelse:

Valgfri. Definerer skrifttypens fedhed. Standard er "normal"

Beskrivelse:

unicode-range

Værdier:

unicode-range

Beskrivelse:

Valgfri. Definerer rækken af UNICODE-tegn, som skrifttypen understøtter. Standard er "U+0-10FFFF"