CSS Web-teckensnitt
- Föregående sida CSS texteffekt
- Nästa sida CSS 2D-omvandling
CSS @font-face-regeln
Webbteckensnitt tillåter webbdesigners att använda teckensnitt som inte är installerade på användarens dator.
När du hittar/köper teckensnitt du vill använda, inkludera endast teckenfilen på din webbserver. Den kommer att laddas ner automatiskt till användaren när den behövs.
Dina 'egna' teckensnitt i CSS @font-face definieras i reglerna.
Olika teckenformater
TrueType-teckensnitt (TTF)
TrueType är ett teckenstandard som utvecklades av Apple och Microsoft i slutet av 1980-talet. TrueType är det vanligaste teckenformatet för Mac OS och Microsoft Windows.
OpenType-teckensnitt (OTF)
OpenType är ett format för skalbara datorteckensnitt. Det är byggt på TrueType och är ett registrerat varumärke av Microsoft. Idag används OpenType-teckensnitt på de flesta datorplattformar.
Web Open Font Format (WOFF)
WOFF är ett teckenformat för webben. Det utvecklades 2009 och har nu blivit en rekommenderad standard av W3C. WOFF är i grunden en komprimerad och metadatainnehållande OpenType eller TrueType. Målet är att stödja distribution av teckensnitt från server till klient på nätverk med bandbreddsbegränsningar.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType-teckensnitt erbjuder bättre kompression än WOFF 1.0.
SVG-teckensnitt/figurer
SVG-teckensnitt tillåter att använda SVG som teckenform när text visas. SVG 1.1-standarden definierar en teckenmodul som gör det möjligt att skapa teckensnitt i SVG-dokument. Du kan också tillämpa CSS på SVG-dokument, och @font-face-regeln kan användas för text i SVG-dokument.
Inbäddad OpenType-teckensnitt (EOT)
EOT-fonten är en komprimerad form av Microsofts OpenType-font, används som inbäddad font på webbsidor.
Webbläsarens stöd för fontformat
Numrerna i tabellen anger den första webbläsarversionen som fullständigt stöder detta fontformat.
| Fontformat | |||||
| 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 |
*IE:Detta fontformat är endast giltigt när satt till "installable".
*Firefox:Standarden stöds inte, men kan aktiveras (kräver att flaggan sätts till "true" för att använda WOFF2).
Använd den font du behöver
Inom @font-face-regeln: definiera först fontnamnet (t.ex. myFirstFont) och peka sedan på fontfilen.
Tips:Använd alltid små bokstäver för font URL:er. Stora bokstäver kan ge oväntade resultat i IE.
För att använda fonten i HTML-element, hänvisa till fontnamnet via font-family-attributet (myFirstFont):
exempel
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Använd fet text
Du måste lägga till en annan @font-face-regel som innehåller beskrivaren för fet text:
exempel
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Filen "sansation_bold.woff" är en annan fontfil som innehåller Sansation-fontens fetstil.
När en textsektion med "myFirstFont"-fontfamilj ska visas i fet stil, använder webbläsaren det.
På detta sätt kan du ställa in många @font-face regeln.
CSS font beskrivning
Följande tabell visar vilka som kan användas inom @font-face Alla fontbeskrivare (font descriptor) definierade inom regeln:
| beskrivare | värde | beskrivning |
|---|---|---|
| font-family | name | nödvändigt. Definiera fontnamnet. |
| src | URL | nödvändigt. Definiera URL:en till字体filen. |
| font-stretch |
|
Valfritt. Definiera hur tecknen ska sträckas ut. Standardvärdet är "normal". |
| font-style |
|
Valfritt. Definiera typsnittets stil. Standardvärdet är "normal". |
| font-weight |
|
Valfritt. Definiera typsnittets tjocklek. Standardvärdet är "normal". |
| unicode-range | unicode-range | Valfritt. Definiera Unicode-teckenomfattningen som stöds av tecknet. Standardvärdet är "U+0-10FFFF". |
- Föregående sida CSS texteffekt
- Nästa sida CSS 2D-omvandling
