Het bepalen van het gedrag van een webfont tijdens het laden kan een belangrijke techniek zijn om de prestaties te optimaliseren. Met de nieuwe font-display descriptor voor @font-face kunnen ontwikkelaars bepalen hoe hun webfonts worden weergegeven (of hoe ze terugvallen), afhankelijk van hoe lang het duurt om ze te laden.
Verschillen in lettertypeweergave vandaag de dag
Webfonts bieden ontwikkelaars de mogelijkheid om rijke typografie in hun projecten te integreren, met als nadeel dat als de gebruiker nog geen lettertype heeft, de browser er tijd aan moet besteden om het te downloaden. Omdat netwerken onstabiel kunnen zijn, kan deze downloadtijd de gebruikerservaring negatief beïnvloeden. Niemand zal er immers om geven hoe mooi je tekst is als het onevenredig lang duurt om weer te geven!
Om het risico van een trage lettertypedownload te beperken, implementeren de meeste browsers een time-out waarna een fallback-lettertype wordt gebruikt. Dit is een nuttige techniek, maar helaas verschilt de implementatie per browser.
| Browser | Time-out | Terugval | Ruil |
|---|---|---|---|
| Chroom 35+ | 3 seconden | Ja | Ja |
| Opera | 3 seconden | Ja | Ja |
| Firefox | 3 seconden | Ja | Ja |
| Internet Explorer | 0 seconden | Ja | Ja |
| Safari | Geen time-out | N.v.t. | N.v.t. |
- Chrome en Firefox hebben een time-out van drie seconden waarna de tekst wordt weergegeven met het standaardlettertype. Als het lettertype wordt gedownload, vindt er uiteindelijk een omwisseling plaats en wordt de tekst opnieuw weergegeven met het gewenste lettertype.
- Internet Explorer heeft een time-out van nul seconden, wat resulteert in onmiddellijke tekstweergave. Als het gevraagde lettertype nog niet beschikbaar is, wordt een fallback gebruikt en wordt de tekst later opnieuw weergegeven zodra het gevraagde lettertype beschikbaar is.
- Safari heeft geen time-outgedrag (of in ieder geval niets anders dan een standaard netwerktime-out).
Om het nog erger te maken, hebben ontwikkelaars beperkte controle over hoe deze regels hun applicatie beïnvloeden. Een prestatiegerichte ontwikkelaar geeft wellicht de voorkeur aan een snellere eerste ervaring met een fallback-lettertype en gebruikt het mooiere weblettertype pas bij volgende bezoeken nadat het is gedownload. Met tools zoals de Font Loading API is het mogelijk om een deel van het standaardgedrag van de browser te overschrijven en zo prestatieverbeteringen te behalen, maar dit brengt wel de kosten met zich mee dat er niet-triviale hoeveelheden JavaScript moeten worden geschreven die vervolgens in de pagina moeten worden ingevoegd of vanuit een extern bestand moeten worden opgevraagd, wat extra HTTP-latentie met zich meebrengt.
Om deze situatie te verhelpen, heeft de CSS Working Group een nieuwe @font-face descriptor voorgesteld, font-display en een bijbehorende eigenschap voor het bepalen hoe een downloadbaar lettertype wordt weergegeven voordat het volledig is geladen.
Tijdlijnen voor het downloaden van lettertypen
Vergelijkbaar met het bestaande lettertype-time-outgedrag dat sommige browsers tegenwoordig hanteren, verdeelt font-display de levensduur van een lettertypedownload in drie hoofdperiodes.
- De eerste periode is de periode van het lettertypeblok . Gedurende deze periode moet elk element dat het lettertype probeert te gebruiken, als het lettertype niet geladen is, in plaats daarvan worden weergegeven met een onzichtbaar fallback-lettertype. Als het lettertype succesvol geladen is tijdens de blokperiode, wordt het vervolgens normaal gebruikt.
- De periode voor het wisselen van lettertype vindt direct na de periode voor het lettertypeblok plaats. Gedurende deze periode moet elk element dat het lettertype probeert te gebruiken, als het lettertype niet is geladen, in plaats daarvan worden weergegeven met een fallback-lettertype. Als het lettertype tijdens de wisselperiode succesvol is geladen, wordt het vervolgens normaal gebruikt.
- De periode waarin het lettertype niet geladen is, vindt direct na de periode waarin het lettertype is gewisseld plaats. Als het lettertype aan het begin van deze periode nog niet geladen is, wordt dit gemarkeerd als een mislukte laadpoging, waardoor het normale lettertype terugvalt. Anders wordt het lettertype normaal gebruikt.
Als u deze perioden begrijpt, kunt u font-display gebruiken om te bepalen hoe uw lettertype moet worden weergegeven, afhankelijk van of en wanneer het is gedownload.
Welk lettertype past bij u?
Om met de font-display descriptor te werken, voegt u deze toe aan uw @font-face at-rules:
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display ondersteunt momenteel het volgende bereik van waarden auto | block | swap | fallback | optional .
auto
Auto gebruikt de lettertypeweergavestrategie die de user-agent gebruikt. De meeste browsers hebben momenteel een standaardstrategie die vergelijkbaar is met block .
blok
block geeft het lettertype een korte blokperiode (3 seconden wordt in de meeste gevallen aanbevolen) en een oneindige wisselperiode. Met andere woorden: de browser tekent eerst "onzichtbare" tekst als het lettertype niet geladen is, maar wisselt het lettertype in zodra het geladen wordt. Om dit te doen, creëert de browser een anoniem lettertype met vergelijkbare metrieken als het geselecteerde lettertype, maar met alle glyphs die geen "inkt" bevatten. Deze waarde mag alleen worden gebruikt als de tekst in een bepaald lettertype moet worden weergegeven om de pagina bruikbaar te maken.
ruil
swap geeft het lettertype een blokperiode van nul seconden en een oneindige swapperiode. Dit betekent dat de browser de tekst direct tekent met een fallback als het lettertype niet geladen is, maar het lettertype verwisselt zodra het geladen wordt. Net als bij block moet deze waarde alleen worden gebruikt wanneer de weergave van tekst in een bepaald lettertype belangrijk is voor de pagina, maar weergave in elk lettertype nog steeds de juiste boodschap overbrengt. Logotekst is een goede kandidaat voor swap , omdat het weergeven van een bedrijfsnaam met een redelijke fallback de boodschap overbrengt, maar u uiteindelijk toch het officiële lettertype gebruikt.
terugval
Fallback geeft het lettertype een extreem korte blokperiode (100 ms of minder wordt in de meeste gevallen aanbevolen) en een korte wisselperiode (drie seconden wordt in de meeste gevallen aanbevolen). Met andere woorden: het lettertype wordt eerst weergegeven met een fallback als het niet geladen is, maar het lettertype wordt gewisseld zodra het geladen is. Als er echter te veel tijd verstrijkt, wordt de fallback gebruikt voor de rest van de levensduur van de pagina. Fallback is een goede kandidaat voor zaken zoals hoofdtekst, waarbij u wilt dat de gebruiker zo snel mogelijk begint met lezen en de ervaring niet wilt verstoren door tekst te verschuiven terwijl een nieuw lettertype wordt geladen.
optioneel
optioneel geeft het lettertype een extreem korte blokperiode (100 ms of minder wordt in de meeste gevallen aanbevolen) en een wisselperiode van nul seconden. Net als fallback is dit een goede keuze wanneer het downloaden van het lettertype meer een "leuke bijkomstigheid" is, maar niet cruciaal voor de ervaring. De optionele waarde laat het aan de browser over om te beslissen of het downloaden van het lettertype moet worden gestart. De browser kan ervoor kiezen dit niet te doen of het met een lage prioriteit te doen, afhankelijk van wat de browser het beste vindt voor de gebruiker. Dit kan nuttig zijn in situaties waarin de gebruiker een zwakke verbinding heeft en het downloaden van een lettertype mogelijk niet de beste manier is om resources te benutten.
Browserondersteuning
font-display staat momenteel achter de Experimental Web Platform Features-vlag in desktopversie Chrome 49 en wordt geleverd in Opera en Opera voor Android.
Demonstratie
Bekijk het voorbeeld om font-display eens uit te proberen. Voor prestatiegerichte ontwikkelaars kan dit een extra handig hulpmiddel zijn!