Den @font-faceregel tillader brugerdefinerede skrifttyper, der skal lastes på en webside. Når den er føjet til et typografiark, beder reglen browseren om at downloade skrifttypen, hvorfra den hostes, og derefter vise den som angivet i CSS.
Uden reglen er vores designs begrænset til de skrifttyper, der allerede er indlæst på en brugers computer, som varierer afhængigt af det anvendte system. Her er en god oversigt over eksisterende systemskrifttyper.
Dybeste mulige browsersupport
Dette er metoden med den dybeste støtte lige nu. Den @font-faceregel bør føjes til stilarket før alle stilarter.
@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 */ )Brug det derefter til at style elementer som dette:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktisk niveau for browsersupport
Ting skifter kraftigt mod WOFF og WOFF 2, så vi kan sandsynligvis slippe af sted med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Lidt dybere browsersupport
Hvis du har brug for en slags lykkeligt medium mellem fuld støtte og praktisk support, vil dette dække et par baser mere:
@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 | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Super Progressiv browsersupport
Hvis vi lægger gården på WOFF, kan vi forvente, at tingene skifter mod WOFF2 på et eller andet tidspunkt. Det betyder, at vi kan leve på den blødende kant med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ingen | 35+ med flag | 23+ | Ingen | 37 | Ingen |
Alternative teknikker
@import
Selvom det @font-faceer fremragende til skrifttyper, der hostes på vores egne servere, kan der være situationer, hvor en hostet fontløsning er bedre. Google Fonts tilbyder dette som en måde at bruge deres skrifttyper på. Følgende er et eksempel på brug af @importat indlæse Open Sans-skrifttypen fra Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Derefter kan vi bruge det til at style elementer:
body ( font-family: 'Open Sans', sans-serif; )Hvis du åbner URL'en til skrifttypen, kan du faktisk se alt det @font-facearbejde, der udføres bag kulisserne.
En fordel ved at bruge en hostet tjeneste er, at det sandsynligvis vil omfatte alle skrifttypefilvariationer, hvilket sikrer dyb cross-browser-kompatibilitet uden at skulle være vært for alle disse filer selv.
Se pennen ved hjælp af @ import for brugerdefinerede skrifttyper af CSS-Tricks (@ css-tricks) på CodePen.
ing et stilark
På samme måde kan du linke til det samme aktiv som enhver anden CSS-fil i HTML-dokumentet snarere end i CSS. Ved hjælp af det samme eksempel fra Google Fonts er dette, hvad vi ville bruge:
Derefter kan vi style vores elementer som de andre metoder:
body ( font-family: 'Open Sans', sans-serif; )Igen importerer dette @font-facereglerne, men i stedet for at injicere dem til vores typografiark føjes de til vores HTML i stedet.
Se pennen ved brug af tilpassede skrifttyper af CSS-Tricks (@ css-tricks) på CodePen.
Det handler om det samme ... begge teknikker downloader de nødvendige aktiver.
Forståelse af skrifttypefiltyper
Det originale uddrag øverst i dette indlæg refererer til mange filer med mærkelige udvidelser. Lad os gå over hver enkelt og få en bedre forståelse af, hvad de mener.
WOFF / WOFF2
Står for: Web Open Font Format.
OOF, der er oprettet til brug på nettet og udviklet af Mozilla sammen med andre organisationer, indlæses ofte hurtigere end andre formater, fordi de bruger en komprimeret version af strukturen, der bruges af OpenType (OTF) og TrueType (TTF) skrifttyper. Dette format kan også omfatte metadata og licensinformation inden for fontfilen. Dette format ser ud til at være vinderen, og hvor alle browsere er på vej hen.
WOFF2 er den næste generation af WOFF og kan prale med bedre kompression end originalen.
SVG / SVGZ
Står for: Skalerbar vektorgrafik (skrifttype)
SVG er en vektorgenoprettelse af skrifttypen, hvilket gør den meget lettere i filstørrelse og gør den også ideel til mobil brug. Dette format er det eneste tilladt i version 4.1 og derunder af Safari til iOS. SVG-skrifttyper understøttes i øjeblikket ikke af Firefox, IE eller IE Mobile. Firefox har udsat implementeringen på ubestemt tid for at fokusere på WOFF.
SVGZ er den zip-version af SVG.
EOT
Står for: Embedded Open Type.
Dette format blev oprettet af Microsoft (de originale innovatorer af @font-face) og er en beskyttet filstandard, der kun understøttes af IE. Faktisk er det det eneste format, som IE8 og derunder genkender, når de bruges @font-face.
OTF / TTF
Står for: OpenType Font og TrueType Font.
WOFF-formatet blev oprindeligt oprettet som en reaktion på OTF og TTF, dels fordi disse formater let (og ulovligt) kunne kopieres. OpenType har dog kapaciteter, som mange designere måske er interesserede i (ligaturer og sådan).
En note om ydeevne
Webfonte er gode til design, men det er vigtigt også at forstå deres indvirkning på webydelsen. Brugerdefinerede skrifttyper får ofte sider til at få et præstationshit, fordi skrifttypen skal downloades, før den vises.
Et almindeligt symptom plejede at være et kort øjeblik, hvor skrifttyper først indlæses som reserve, derefter blinker til den downloadede skrifttype. Paul Irish har et ældre indlæg om dette (kaldet “FOUT”: Flash Of Unstyled Text).
I disse dage skjuler browsere generelt teksten, før den tilpassede skrifttype indlæses som standard. Bedre eller værre? Du bestemmer. Du kan udøve en vis kontrol over dette gennem forskellige teknikker. Lidt uden for anvendelsesområdet for denne artikel, men her er en trifekta af artikler af Zach Leatherman for at få dig i gang ned ad kaninhullet:
- Bedre @ font-face med Font Load Events
- Hvordan vi bruger webskrifttyper ansvarligt eller undgår en @ font-face-palm
- Flash af faux tekst - endnu mere ved indlæsning af skrifttyper
Her er nogle flere overvejelser, når du implementerer tilpassede skrifttyper:
Se filstørrelsen
Skrifttyper kan være overraskende tunge, så læn dig mod muligheder, der tilbyder lettere versioner. For eksempel foretrækker et skrifttypesæt, der er 50 KB versus et, der vejer 400 KB.
Begræns tegnsættet, hvis det er muligt
Har du virkelig brug for de fedte og sorte vægte til en skrifttype? At begrænse dine skrifttyper til kun at indlæse det, der er brugt, er en god idé, og der er nogle gode tip om det her.
Overvej systemskrifttyper til små skærme
Mange enheder sidder fast på skøre forbindelser. Et trick kan være at målrette mod større skærme, når du indlæser den brugerdefinerede skrifttype ved hjælp af @media.
I dette eksempel får skærme, der er mindre end 1000 px, serveret en systemskrifttype i stedet, og skærme, der er brede og derover, får den tilpassede skrifttype.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Fonttjenester
Der er en række tjenester, der er vært for skrifttyper og også giver adgang til kommercielt licenserede skrifttyper. Fordelene ved at bruge en tjeneste svarer ofte til, at et stort udvalg af juridiske skrifttyper leveres effektivt (f.eks. Servering på en hurtig CDN).
Her er et par hostede skrifttjenester:
- Cloud Typography
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotek
- Fonts.com
- Google skrifttyper
- Font Egern
Hvad med ikonskrifttyper?
Det er sandt, @ font-face kan indlæse en skrifttypefil fuld af ikoner, der kan bruges til et ikonsystem. Jeg synes dog, du har det meget bedre at bruge SVG som et ikon-system. Her er en sammenligning af de to metoder.
Flere ressourcer
- Grundlæggende om Google Font API
- CSS-skrifttypefamilier