CSS webbteckensnitt

Innehållsförteckning

CSS @font-face-regeln

Webbteckensnitt gör att webbdesigners kan använda teckensnitt som inte är installerade på användarens dator.

När du har hittat/köpt typsnittet du vill använda är det bara att inkludera typsnittet fil på din webbserver, och den kommer automatiskt att laddas ner till användaren vid behov.

Dina "egna" teckensnitt definieras inom CSS-regeln @font-face.

Olika teckensnittsformat

TrueType-teckensnitt (TTF)

TrueType är en typsnittsstandard utvecklad i slutet av 1980-talet av Apple och Microsoft. TrueType är det vanligaste teckensnittsformatet för både Mac OS och Microsoft Windows operativsystem.

OpenType Fonts (OTF)

OpenType är ett format för skalbara datorteckensnitt. Den byggdes på TrueType, och är ett registrerat varumärke för Microsoft. OpenType-teckensnitt används idag ofta på de stora datorplattformar.

Web Open Font Format (WOFF)

WOFF är ett teckensnittsformat för användning på webbsidor. Den utvecklades 2009 och är nu en W3C-rekommendation. WOFF är i huvudsak OpenType eller TrueType med komprimering och ytterligare metadata. Målet är att stödja teckensnittsdistribution från en server till en klient över ett nätverk med bandbreddsbegränsningar.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType-teckensnitt som ger bättre komprimering än WOFF 1.0.

SVG-teckensnitt/former

SVG-teckensnitt gör att SVG kan användas som glyfer vid visning av text. SVG 1.1 specifikation definierar en teckensnittsmodul som tillåter skapandet av teckensnitt inom en SVG-dokument. Du kan också tillämpa CSS på SVG-dokument och @font-face-regeln kan appliceras på text i SVG-dokument.

Inbäddade OpenType-teckensnitt (EOT)

EOT-teckensnitt är en kompakt form av OpenType-teckensnitt designade av Microsoft för användning som inbäddade typsnitt på webbsidor.

Webbläsarstöd för teckensnittsformat

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder teckensnittsformat.

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: Teckensnittsformatet fungerar bara när det är inställt på "installerbart".

Använd det teckensnitt du vill ha

I regeln @font-face; definiera först ett namn för teckensnittet (t.ex. myFirstFont) och peka sedan på teckensnittsfilen.

Tips: Använd alltid små bokstäver för teckensnittets webbadress. Versaler kan ge oväntade resultat i IE.

För att använda teckensnittet för ett HTML-element, se namnet på teckensnittet (myFirstFont) genom egenskapen font-family:

Exempel

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

div
{
   
font-family: myFirstFont;
}

Prova själv →

<!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>

Använder fet text

Du måste lägga till en annan @font-face-regel som innehåller beskrivningar för fet text:

Exempel

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

Prova själv →

<!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" är en annan typsnittsfil som innehåller de fetstilta tecknen för Sansation-teckensnittet.

Webbläsare kommer att använda detta när ett stycke text med teckensnittsfamiljen "myFirstFont" ska återges som fetstil.

På så sätt kan du ha många @font-face regler för samma typsnitt.

CSS-teckensnittsbeskrivningar

Följande tabell listar alla teckensnittsbeskrivningar som kan definieras i regeln @font-face:

Beskrivning:

font-family

Värden:

name

Beskrivning:

Nödvändig. Definierar ett namn för teckensnittet

Beskrivning:

src

Värden:

URL

Beskrivning:

Nödvändig. Definierar webbadressen till teckensnittsfilen

Beskrivning:

font-stretch

Värden:

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

Beskrivning:

Frivillig. Definierar hur typsnittet ska sträckas ut. Standard är "normal"

Beskrivning:

font-style

Värden:

normal
italic
oblique

Beskrivning:

Frivillig. Definierar hur typsnittet ska utformas. Standard är "normal"

Beskrivning:

font-weight

Värden:

normal
bold
100
200
300
400
500
600
700
800
900

Beskrivning:

Frivillig. Definierar teckensnittets djärvhet. Standard är "normal"

Beskrivning:

unicode-range

Värden:

unicode-range

Beskrivning:

Frivillig. Definierar intervallet av UNICODE-tecken som teckensnittet stöder. Standard är "U+0-10FFFF"