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
.
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.
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".
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
:
@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>
Du måste lägga till en annan @font-face
-regel som innehåller beskrivningar för fet text:
@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.
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"