Den @font-faceregeln tillåter anpassade teckensnitt som skall lastas på en webbsida. När den väl har lagts till i ett formatmall, instruerar regeln webbläsaren att ladda ner teckensnittet där det är värd, och sedan visa det enligt specifikationen i CSS.
Utan regeln är våra mönster begränsade till teckensnitt som redan är laddade på en användares dator, vilket varierar beroende på vilket system som används. Här är en bra uppdelning av befintliga systemteckensnitt.
Största möjliga webbläsarstöd
Detta är metoden med det djupaste stödet som är möjligt just nu. Den @font-faceregeln bör läggas till mallen innan stilar.
@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 */ )Använd den sedan för att utforma element så här:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktisk nivå för webbläsarstöd
Saker och ting förändras kraftigt mot WOFF och WOFF 2, så vi kan nog komma undan med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Något djupare webbläsarsupport
Om du behöver ett slags lyckligt medium mellan fullt stöd och praktiskt stöd kommer detta att täcka några fler baser:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Super Progressive webbläsarsupport
Om vi sätter gården på WOFF kan vi förvänta oss att saker kommer att flyttas mot WOFF2 någon gång i tiden. Det betyder att vi kan leva på den blödande kanten med:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nej | 35+ med flagga | 23+ | Nej | 37 | Nej |
Alternativa tekniker
@import
Även om det @font-faceär utmärkt för typsnitt som finns på våra egna servrar, kan det finnas situationer där en värd typsnittslösning är bättre. Google-teckensnitt erbjuder detta som ett sätt att använda sina teckensnitt. Följande är ett exempel på hur du @importladdar in Open Sans-teckensnittet från Google-teckensnitt:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Då kan vi använda den för att utforma element:
body ( font-family: 'Open Sans', sans-serif; )Om du öppnar URL: en för teckensnittet kan du faktiskt se allt @font-facearbete som görs bakom kulisserna.
En fördel med att använda en värdtjänst är att den sannolikt kommer att inkludera alla typsnittsfilvarianter, vilket säkerställer djupgående webbläsarkompatibilitet utan att behöva vara värd för alla dessa filer själva.
Se pennan med @import för anpassade teckensnitt av CSS-Tricks (@ css-tricks) på CodePen.
ing ett formatmall
På samma sätt kan du länka till samma tillgång som med någon annan CSS-fil, i HTML-dokumentet snarare än i CSS. Med samma exempel från Google Fonts är det här vi skulle använda:
Sedan kan vi utforma våra element som de andra metoderna:
body ( font-family: 'Open Sans', sans-serif; )Återigen importerar detta @font-facereglerna, men istället för att injicera dem i vårt formatmall läggs de till i vår HTML istället.
Se pennan som använder för anpassade teckensnitt av CSS-Tricks (@ css-tricks) på CodePen.
Det handlar om samma sak ... båda teknikerna laddar ner de tillgångar som behövs.
Förstå typsnitt för typsnitt
Det ursprungliga utdraget högst upp i detta inlägg refererar till många filer med konstiga tillägg. Låt oss gå igenom var och en och få en bättre förståelse för vad de menar.
WOFF / WOFF2
Står för: Web Open Font Format.
Skapat för användning på webben och utvecklat av Mozilla i kombination med andra organisationer, WOFF-teckensnitt laddas ofta snabbare än andra format eftersom de använder en komprimerad version av strukturen som används av OpenType (OTF) och TrueType (TTF) -teckensnitt. Detta format kan också innehålla metadata och licensinformation i teckensnittsfilen. Det här formatet verkar vara vinnaren och vart alla webbläsare är på väg.
WOFF2 är nästa generation WOFF och har bättre komprimering än originalet.
SVG / SVGZ
Står för: Skalbar vektorgrafik (typsnitt)
SVG är en vektoråterskapning av teckensnittet, vilket gör det mycket lättare i filstorlek, och gör det också idealiskt för mobil användning. Det här formatet är det enda som tillåts av version 4.1 och senare av Safari för iOS. SVG-teckensnitt stöds för närvarande inte av Firefox, IE eller IE Mobile. Firefox har skjutit upp genomförandet på obestämd tid för att fokusera på WOFF.
SVGZ är den zippade versionen av SVG.
EOT
Står för: Inbäddad öppen typ.
Detta format skapades av Microsoft (de ursprungliga innovatörerna @font-face) och är en egen filstandard som endast stöds av IE. Faktum är att det är det enda formatet som IE8 och nedan kommer att känna igen när de används @font-face.
OTF / TTF
Står för: OpenType-teckensnitt och TrueType-teckensnitt.
WOFF-formatet skapades ursprungligen som en reaktion på OTF och TTF, delvis, eftersom dessa format lätt (och olagligt) kunde kopieras. OpenType har dock funktioner som många designers kan vara intresserade av (ligaturer och liknande).
En anmärkning om prestanda
Webbteckensnitt är bra för design men det är viktigt att du också förstår deras inverkan på webbprestanda. Anpassade teckensnitt gör att webbplatser ofta får en prestationshit eftersom teckensnittet måste laddas ner innan det visas.
Ett vanligt symptom brukade vara ett kort ögonblick där teckensnitt först laddades som reserv och sedan blinkade till det nedladdade teckensnittet. Paul Irish har ett äldre inlägg om detta (kallat "FOUT": Flash of Unstyled Text).
Dessa dagar döljer webbläsare vanligtvis texten innan det anpassade teckensnittet laddas som standard. Bättre eller sämre? Du bestämmer. Du kan utöva viss kontroll över detta genom olika tekniker. Lite utom räckhåll för den här artikeln, men här är en trifekta av artiklar av Zach Leatherman för att komma igång ner i kaninhålet:
- Bättre @ font-face med Font Load Events
- Hur vi använder webbfonter på ett ansvarsfullt sätt, eller undviker en @ font-face-palm
- Flash of Faux Text - ännu mer om teckensnittsladdning
Här är några fler överväganden när du implementerar anpassade teckensnitt:
Titta på filstorleken
Typsnitt kan vara överraskande tunga, så lut dig mot alternativ som erbjuder lättare versioner. Till exempel föredrar en teckensnittsuppsättning som är 50 kB jämfört med en som väger 400 k k.
Begränsa teckenuppsättningen, om möjligt
Behöver du verkligen de djärva och svarta vikterna för ett typsnitt? Att begränsa dina teckensnittsuppsättningar för att bara ladda det som används är en bra idé och det finns några bra tips om det här.
Tänk på systemteckensnitt för små skärmar
Många enheter har fastnat på galna anslutningar. Ett knep kan vara att rikta in sig på större skärmar när du laddar det anpassade teckensnittet med @media.
I det här exemplet får skärmar som är mindre än 1000 pixlar ett systemteckensnitt istället och skärmar som breda och högre får det anpassade teckensnittet.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Font Services
Det finns ett antal tjänster som kommer att vara värd för teckensnitt och ge tillgång till kommersiellt licensierade teckensnitt. Fördelarna med att använda en tjänst handlar ofta om att ett stort urval av juridiska teckensnitt levereras effektivt (t.ex. att servera dem på en snabb CDN).
Här är några värdtjänsttyptjänster:
- Molntypografi
- Typekit
- Fontdeck
- Webbtyp
- Typspring
- Typotek
- Fonts.com
- Google-teckensnitt
- Font ekorre
Vad sägs om ikon typsnitt?
Det är sant, @ font-face kan ladda en teckensnittsfil full av ikoner som kan användas för ett ikonsystem. Men jag tror att du är mycket bättre med att använda SVG som ett ikonsystem. Här är en jämförelse av de två metoderna.
Fler resurser
- Grunderna i Google Font API
- CSS-teckensnittsfamiljer