Den @font-faceregelen gjør tilpassede skrifter som skal lastes på en webside. Når den er lagt til et stilark, instruerer regelen nettleseren om å laste ned skriften der den er vert, og deretter vise den som spesifisert i CSS.
Uten regelen er designene våre begrenset til skriftene som allerede er lastet på en brukers datamaskin, som varierer avhengig av systemet som brukes. Her er en fin oversikt over eksisterende systemfonter.
Dypest mulig støtte for nettleser
Dette er metoden med den dypeste støtten mulig akkurat nå. Den @font-faceregelen bør legges til stilarket før noen stiler.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Bruk den deretter til å style elementer som dette:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktisk nivå av nettleserstøtte
Ting skifter tungt mot WOFF og WOFF 2, så vi kan sannsynligvis komme unna med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Litt dypere nettleserstøtte
Hvis du trenger et slags lykkelig medium mellom full støtte og praktisk støtte, vil dette dekke noen få baser:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Super Progressive nettleserstøtte
Hvis vi setter gården på WOFF, kan vi forvente at ting vil skifte mot WOFF2 på et tidspunkt. Det betyr at vi kan leve på den blødende kanten med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nei | 35+ med flagg | 23+ | Nei | 37 | Nei |
Alternative teknikker
@import
Selv om det @font-faceer utmerket for skrifttyper som er vert på våre egne servere, kan det være situasjoner der en vert fontløsning er bedre. Google Fonts tilbyr dette som en måte å bruke skriftene sine på. Følgende er et eksempel på hvordan @importdu laster inn Open Sans-skrifttypen fra Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Da kan vi bruke den til å style elementer:
body ( font-family: 'Open Sans', sans-serif; )Hvis du åpner URL-en for fonten, kan du faktisk se alt @font-facearbeidet som blir gjort bak kulissene.
En fordel ved å bruke en vertstjeneste er at den sannsynligvis vil inkludere alle fontfilvariasjonene, noe som sikrer dyp kompatibilitet i flere nettlesere uten å måtte være vert for alle disse filene selv.
Se pennen ved hjelp av @import for tilpassede skrifttyper av CSS-Tricks (@ css-tricks) på CodePen.
ing et stilark
På samme måte kan du koble til samme ressurs som med noen annen CSS-fil, i HTML-dokumentet i stedet for i CSS. Ved å bruke det samme eksemplet fra Google Fonts, er dette det vi vil bruke:
Deretter kan vi style elementene våre som de andre metodene:
body ( font-family: 'Open Sans', sans-serif; )Igjen importerer dette @font-facereglene, men i stedet for å injisere dem i stilarket vårt blir de lagt til HTML-en vår i stedet.
Se pennen som bruker for tilpassede skrifttyper av CSS-Tricks (@ css-tricks) på CodePen.
Det handler om det samme ... begge teknikkene laster ned ressursene som trengs.
Forstå fontfiltyper
Den originale utdraget øverst i dette innlegget refererer til mange filer med rare utvidelser. La oss gå gjennom hver enkelt og få en bedre forståelse av hva de mener.
WOFF / WOFF2
Står for: Web Open Font Format.
Opprettet for bruk på nettet, og utviklet av Mozilla i forbindelse med andre organisasjoner, lastes WOFF-skrifter ofte raskere enn andre formater fordi de bruker en komprimert versjon av strukturen som brukes av OpenType (OTF) og TrueType (TTF) -skrifter. Dette formatet kan også inkludere metadata og lisensinformasjon i fontfilen. Dette formatet ser ut til å være vinneren og hvor alle nettlesere er på vei.
WOFF2 er neste generasjon av WOFF og kan skryte av bedre komprimering enn originalen.
SVG / SVGZ
Står for: Skalerbar vektorgrafikk (font)
SVG er en vektoroppretting av skriften, som gjør den mye lettere i filstørrelse, og gjør den også ideell for mobilbruk. Dette formatet er det eneste som er tillatt i versjon 4.1 og eldre av Safari for iOS. SVG-skrifter støttes foreløpig ikke av Firefox, IE eller IE Mobile. Firefox har utsatt implementeringen på ubestemt tid for å fokusere på WOFF.
SVGZ er den zip-versjonen av SVG.
EOT
Står for: Embedded Open Type.
Dette formatet ble opprettet av Microsoft (de originale innovatørene av @font-face) og er en proprietær filstandard som bare støttes av IE. Faktisk er det det eneste formatet som IE8 og nedenfor vil gjenkjenne når det brukes @font-face.
OTF / TTF
Står for: OpenType Font og TrueType Font.
WOFF-formatet ble opprinnelig opprettet som en reaksjon på OTF og TTF, delvis fordi disse formatene lett (og ulovlig) kunne kopieres. OpenType har imidlertid muligheter som mange designere kan være interessert i (ligaturer og slikt).
En merknad om ytelse
Webskrifter er gode for design, men det er viktig å også forstå deres innvirkning på nettytelsen. Egendefinerte skrifter får ofte nettsteder til å treffe ytelse fordi skriften må lastes ned før den vises.
Et vanlig symptom pleide å være et kort øyeblikk der skrifttyper først lastes inn som reserve, og deretter blinker til den nedlastede fonten. Paul Irish har et eldre innlegg om dette (kalt “FOUT”: Flash Of Unstyled Text).
I disse dager skjuler nettlesere vanligvis teksten før den tilpassede fonten lastes inn som standard. Bedre eller verre? Du bestemmer. Du kan utøve litt kontroll over dette gjennom forskjellige teknikker. Litt utenfor omfanget av denne artikkelen, men her er en trifekta av artikler av Zach Leatherman for å komme i gang nedover kaninhullet:
- Bedre @ font-face med Font Load Events
- Hvordan vi bruker nettfonter på en ansvarlig måte, eller unngår en @ font-face-palm
- Flash of Faux Text - enda mer om skriftlasting
Her er noen flere hensyn når du implementerer tilpassede skrifter:
Se filstørrelsen
Fonter kan være overraskende tunge, så lene deg mot alternativer som tilbyr lettere versjoner. For eksempel, favoriser et skriftsett som er 50 KB mot et som veier 400 KB.
Begrens tegnsettet, hvis mulig
Trenger du virkelig de dristige og svarte vektene for en skrift? Det er en god ide å begrense skriftsettene for å laste inn bare det som brukes, og det er noen gode tips om det her.
Vurder systemfonter for små skjermer
Mange enheter sitter fast på skitne tilkoblinger. Et triks kan være å målrette mot større skjermer når du laster den egendefinerte skrifttypen med @media.
I dette eksemplet vil skjermene mindre enn 1000 px få servert en systemfont i stedet, og skjermene som er brede og over vil få den tilpassede fonten.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Fonttjenester
Det finnes en rekke tjenester som er vert for skrifttyper og som også gir tilgang til kommersielt lisensierte skrifter. Fordelene ved å bruke en tjeneste innebærer ofte at et stort utvalg av lovlige skrifter leveres effektivt (f.eks. Servering på en rask CDN).
Her er noen hostede fonttjenester:
- Skytypografi
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotek
- Fonts.com
- Google Fonts
- Font ekorn
Hva med ikonfonter?
Det er sant at @ font-face kan laste inn en fontfil full av ikoner som kan brukes til et ikon-system. Imidlertid tror jeg det er langt bedre å bruke SVG som et ikon-system. Her er en sammenligning av de to metodene.
Flere ressurser
- Grunnleggende om Google Font API
- CSS Font Families