De @font-faceregel staat toe dat aangepaste lettertypen op een webpagina worden geladen. Eenmaal toegevoegd aan een stylesheet, instrueert de regel de browser om het lettertype te downloaden van waar het wordt gehost en het vervolgens weer te geven zoals gespecificeerd in de CSS.
Zonder de regel zijn onze ontwerpen beperkt tot de lettertypen die al op de computer van een gebruiker zijn geladen, die variëren afhankelijk van het systeem dat wordt gebruikt. Hier is een mooie uitsplitsing van bestaande systeemlettertypen.
Diepst mogelijke browserondersteuning
Dit is de methode met de diepst mogelijke ondersteuning op dit moment. De @font-faceregel moet vóór alle stijlen aan de stylesheet worden toegevoegd.
@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 */ )Gebruik het vervolgens om elementen als volgt te stylen:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktisch niveau van browserondersteuning
De zaken verschuiven sterk richting WOFF en WOFF 2, dus we kunnen waarschijnlijk wegkomen met:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Iets diepere browserondersteuning
Als je een soort gelukkig medium nodig hebt tussen volledige ondersteuning en praktische ondersteuning, dan zal dit nog een paar bases dekken:
@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 | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Super Progressive Browser-ondersteuning
Als we de farm op WOFF uitzetten, kunnen we verwachten dat dingen op een bepaald moment naar WOFF2 zullen verschuiven. Dat betekent dat we op het randje kunnen leven met:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nee | 35+ met vlag | 23+ | Nee | 37 | Nee |
Alternatieve technieken
@import
Hoewel het @font-faceuitstekend geschikt is voor lettertypen die op onze eigen servers worden gehost, kunnen er situaties zijn waarin een gehoste lettertype-oplossing beter is. Google Fonts biedt dit als een manier om hun lettertypen te gebruiken. Het volgende is een voorbeeld van het gebruik @importom het Open Sans-lettertype te laden vanuit Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Vervolgens kunnen we het gebruiken om elementen te stylen:
body ( font-family: 'Open Sans', sans-serif; )Als u de URL voor het lettertype opent, kunt u al het @font-facewerk achter de schermen zien.
Een voordeel van het gebruik van een gehoste service is dat deze waarschijnlijk alle variaties in lettertypebestanden bevat, wat een diepe browseroverschrijdende compatibiliteit garandeert zonder dat u al die bestanden zelf hoeft te hosten.
Zie de Pen met @import voor aangepaste lettertypen door CSS-Tricks (@ css-tricks) op CodePen.
ing een stylesheet
Op dezelfde manier zou je naar hetzelfde item kunnen linken als elk ander CSS-bestand, in het HTML-document in plaats van in de CSS. Met hetzelfde voorbeeld van Google Fonts, is dit wat we zouden gebruiken:
Vervolgens kunnen we onze elementen stylen zoals de andere methoden:
body ( font-family: 'Open Sans', sans-serif; )Nogmaals, dit is het importeren van de @font-faceregels, maar in plaats van ze in onze stylesheet te injecteren, worden ze in plaats daarvan aan onze HTML toegevoegd .
Zie Pen gebruiken voor aangepaste lettertypen door CSS-Tricks (@ css-tricks) op CodePen.
Het is ongeveer hetzelfde… beide technieken downloaden de benodigde middelen.
Inzicht in lettertype-bestandstypen
Het originele fragment bovenaan dit bericht verwijst naar veel bestanden met vreemde extensies. Laten we ze allemaal bespreken en een beter begrip krijgen van wat ze betekenen.
WOFF / WOFF 2
Staat voor: Web Open Font Format.
Gemaakt voor gebruik op internet en ontwikkeld door Mozilla in samenwerking met andere organisaties, worden WOFF-lettertypen vaak sneller geladen dan andere indelingen omdat ze een gecomprimeerde versie gebruiken van de structuur die wordt gebruikt door OpenType- (OTF) en TrueType (TTF) -lettertypen. Deze indeling kan ook metagegevens en licentie-informatie in het lettertypebestand bevatten. Dit formaat lijkt de winnaar te zijn en waar alle browsers naartoe gaan.
WOFF2 is de volgende generatie WOFF en biedt betere compressie dan het origineel.
SVG / SVGZ
Staat voor: Scalable Vector Graphics (Font)
SVG is een vectorrecreatie van het lettertype, waardoor het veel lichter is qua bestandsgrootte en het ook ideaal maakt voor mobiel gebruik. Dit formaat is het enige dat is toegestaan door versie 4.1 en lager van Safari voor iOS. SVG-lettertypen worden momenteel niet ondersteund door Firefox, IE of IE Mobile. Firefox heeft de implementatie voor onbepaalde tijd uitgesteld om zich op WOFF te concentreren.
SVGZ is de gecomprimeerde versie van SVG.
EOT
Staat voor: Embedded Open Type.
Dit formaat is gemaakt door Microsoft (de oorspronkelijke innovators van @font-face) en is een eigen bestandsstandaard die alleen wordt ondersteund door IE. In feite is dit het enige formaat dat IE8 en lager zullen herkennen bij gebruik @font-face.
OTF / TTF
Staat voor: OpenType Font en TrueType Font.
Het WOFF-formaat is aanvankelijk gemaakt als een reactie op OTF en TTF, gedeeltelijk omdat deze formaten gemakkelijk (en illegaal) kunnen worden gekopieerd. OpenType heeft echter mogelijkheden waar veel ontwerpers in geïnteresseerd kunnen zijn (ligaturen en dergelijke).
Een opmerking over prestaties
Weblettertypen zijn geweldig voor ontwerp, maar het is belangrijk om ook hun impact op de webprestaties te begrijpen. Aangepaste lettertypen zorgen er vaak voor dat sites een prestatiehit krijgen omdat het lettertype moet worden gedownload voordat het wordt weergegeven.
Een veel voorkomend symptoom was een kort moment waarop lettertypen eerst werden geladen als fallback en vervolgens knipperen naar het gedownloade lettertype. Paul Irish heeft hier een oudere post op (genaamd "FOUT": Flash Of Unstyled Text).
Tegenwoordig verbergen browsers de tekst over het algemeen voordat het aangepaste lettertype standaard wordt geladen. Beter of slechter? Jij beslist. U kunt hier via verschillende technieken enige controle over uitoefenen. Een beetje buiten het bereik van dit artikel, maar hier is een trifecta van artikelen van Zach Leatherman om je op weg te helpen in het konijnenhol:
- Beter @ font-face met Font Load Events
- Hoe we weblettertypen op verantwoorde wijze gebruiken, of een @ font-face-palm vermijden
- Flash of Faux Text - nog meer over het laden van lettertypen
Hier volgen nog enkele overwegingen bij het implementeren van aangepaste lettertypen:
Let op de bestandsgrootte
Lettertypen kunnen verrassend zwaar zijn, dus neig naar opties die lichtere versies bieden. Geef bijvoorbeeld de voorkeur aan een lettertypeset van 50 KB in plaats van een set van 400 KB.
Beperk de tekenset, indien mogelijk
Heb je echt de vetgedrukte en zwarte gewichten nodig voor één lettertype? Het is een goed idee om uw lettertypesets te beperken om alleen te laden wat wordt gebruikt, en daar zijn hier enkele goede tips voor.
Overweeg systeemlettertypen voor kleine schermen
Veel apparaten zitten vast op waardeloze verbindingen. Een truc zou kunnen zijn om grotere schermen te targeten bij het laden van het aangepaste lettertype met @media.
In dit voorbeeld krijgen schermen die kleiner zijn dan 1000px een systeemlettertype te zien en schermen die breed zijn en hoger, het aangepaste lettertype.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Lettertypeservices
Er zijn een aantal services die lettertypen hosten en ook toegang bieden tot commercieel gelicentieerde lettertypen. De voordelen van het gebruik van een service komen vaak neer op het efficiënt afleveren van een grote selectie aan legale lettertypen (bijvoorbeeld door ze op een snel CDN te serveren).
Hier zijn een paar gehoste lettertypeservices:
- Cloud typografie
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typotheek
- Fonts.com
- Google-lettertypen
- Lettertype Squirrel
Hoe zit het met pictogramlettertypen?
Het is waar, @ font-face kan een lettertypebestand vol met pictogrammen laden die kunnen worden gebruikt voor een pictogramsysteem. Ik denk echter dat je SVG veel beter af bent als pictogramsysteem. Hier is een vergelijking van de twee methoden.
Meer middelen
- Basisprincipes van Google Font API
- CSS-lettertypefamilies