Het bepalen van het gedrag van een weblettertype tijdens het laden kan een belangrijke techniek voor het afstemmen van de prestaties zijn. Met de nieuwe font-display descriptor voor @font-face kunnen ontwikkelaars beslissen hoe hun weblettertypen worden weergegeven (of terugvallen), afhankelijk van hoe lang het duurt voordat ze zijn geladen.
Verschillen in de weergave van lettertypen vandaag
Webfonts geven ontwikkelaars de mogelijkheid om rijke typografie in hun projecten op te nemen, met als wisselwerking dat als de gebruiker nog niet over een lettertype beschikt, de browser enige tijd moet besteden aan het downloaden ervan. Omdat netwerken zwak kunnen zijn, kan deze downloadtijd de ervaring van de gebruiker negatief beïnvloeden. Het kan tenslotte niemand schelen hoe mooi uw tekst is als het buitensporig veel tijd kost om weer te geven!
Om een deel van het risico van een langzame download van lettertypen te beperken, implementeren de meeste browsers een time-out waarna een reservelettertype wordt gebruikt. Dit is een nuttige techniek, maar helaas verschillen browsers over de daadwerkelijke implementatie.
| 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 fallback-lettertype. Als het lettertype erin slaagt te downloaden, vindt er uiteindelijk een omwisseling plaats en wordt de tekst opnieuw weergegeven met het beoogde lettertype.
- Internet Explorer heeft een time-out van nul seconden, wat resulteert in onmiddellijke tekstweergave. Als het gevraagde lettertype nog niet beschikbaar is, wordt er gebruik gemaakt van een fallback en wordt de tekst later opnieuw weergegeven zodra het gevraagde lettertype beschikbaar komt.
- Safari vertoont geen time-outgedrag (of in ieder geval niets anders dan een standaardnetwerktime-out).
Tot overmaat van ramp hebben ontwikkelaars beperkte controle over de manier waarop deze regels hun toepassing beïnvloeden. Een prestatiegerichte ontwikkelaar geeft er misschien de voorkeur aan om een snellere eerste ervaring te hebben die gebruik maakt van een fallback-lettertype, en alleen het mooiere weblettertype te gebruiken bij volgende bezoeken nadat het de kans heeft gehad om te downloaden. Met behulp van tools zoals de Font Loading API kan het mogelijk zijn om enkele standaard browsergedragingen te omzeilen en prestatieverbeteringen te bereiken, maar dit gaat ten koste van de noodzaak om niet-triviale hoeveelheden JavaScript te schrijven die vervolgens in de pagina moeten worden inline of aangevraagd vanuit een extern bestand, waardoor extra HTTP-latentie ontstaat.
Om deze situatie te helpen verhelpen heeft de CSS-werkgroep een nieuwe @font-face descriptor voorgesteld, font-display , en een overeenkomstige eigenschap om te bepalen hoe een downloadbaar lettertype wordt weergegeven voordat het volledig is geladen.
Tijdlijnen voor het downloaden van lettertypen
Vergelijkbaar met het bestaande time-outgedrag voor lettertypen dat sommige browsers tegenwoordig implementeren, verdeelt font-display de levensduur van een lettertypedownload in drie hoofdperioden.
- De eerste periode is de lettertypeblokperiode . Als het lettertype gedurende deze periode niet is geladen, moet elk element dat het probeert te gebruiken in plaats daarvan worden weergegeven met een onzichtbaar reservelettertype. Als het lettertype tijdens de blokperiode succesvol wordt geladen, wordt het lettertype normaal gebruikt.
- De periode voor het wisselen van lettertypen vindt plaats onmiddellijk na de periode voor het blokkeren van lettertypen. Als het lettertype gedurende deze periode niet is geladen, moet elk element dat het probeert te gebruiken in plaats daarvan worden weergegeven met een reservelettertype. Als het lettertype tijdens de wisselperiode succesvol wordt geladen, wordt het lettertype normaal gebruikt.
- De lettertype-foutperiode vindt plaats onmiddellijk na de lettertype-wisselperiode. Als het lettertype nog niet is geladen wanneer deze periode begint, wordt het gemarkeerd als mislukt laden, wat een normale terugval van het lettertype veroorzaakt. Anders wordt het lettertype normaal gebruikt.
Als u deze perioden begrijpt, kunt u font-display gebruiken om te beslissen hoe uw lettertype moet worden weergegeven, afhankelijk van of en wanneer het is gedownload.
Welke lettertypeweergave 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 waardenbereik auto | block | swap | fallback | optional .
auto
auto gebruikt elke 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 (3s wordt in de meeste gevallen aanbevolen) en een oneindige wisselperiode. Met andere woorden: de browser tekent eerst "onzichtbare" tekst als het lettertype niet is geladen, maar verandert het lettertype zodra het wordt geladen. Om dit te doen, maakt de browser een anoniem lettertype met statistieken die vergelijkbaar zijn met het geselecteerde lettertype, maar waarbij alle glyphs geen "inkt" bevatten. Deze waarde mag alleen worden gebruikt als het weergeven van tekst in een bepaald lettertype vereist is 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 tekst onmiddellijk tekent met een terugval als het lettertype niet is geladen, maar het lettertype omwisselt zodra het wordt geladen. Net als bij block mag deze waarde alleen worden gebruikt wanneer het weergeven van tekst in een bepaald lettertype belangrijk is voor de pagina, maar het weergeven in welk lettertype dan ook zal nog steeds een correcte boodschap overbrengen. Logotekst is een goede kandidaat voor ruil, omdat het weergeven van de naam van een bedrijf met een redelijke terugval de boodschap overbrengt, maar uiteindelijk zou je het officiële lettertype gebruiken.
terugval
fallback geeft het lettertype een extreem kleine blokperiode (in de meeste gevallen wordt 100 ms of minder aanbevolen) en een korte wisselperiode (in de meeste gevallen wordt drie seconden aanbevolen). Met andere woorden: het lettertype wordt eerst weergegeven met een fallback als het niet is geladen, maar het lettertype wordt verwisseld zodra het wordt geladen. Als er echter te veel tijd verstrijkt, wordt de fallback gedurende de rest van de levensduur van de pagina gebruikt. fallback is een goede kandidaat voor zaken als hoofdtekst waarbij je wilt dat de gebruiker zo snel mogelijk begint met lezen en de ervaring niet wil verstoren door tekst te verschuiven terwijl een nieuw lettertype wordt geladen.
optioneel
optioneel geeft het lettertype een extreem kleine blokperiode (in de meeste gevallen wordt 100 ms of minder aanbevolen) en een wisselperiode van nul seconden. Net als bij fallback is dit een goede keuze als het downloadlettertype meer “nice to have” is, maar niet essentieel voor de ervaring. De optionele waarde laat het aan de browser over om te beslissen of hij het downloaden van het lettertype wil starten, wat hij niet wil doen of met een lage prioriteit, afhankelijk van wat hij denkt dat het beste is voor de gebruiker. Dit kan nuttig zijn in situaties waarin de gebruiker een zwakke verbinding heeft en het naar beneden halen van een lettertype misschien niet het beste gebruik van de bronnen is.
Browser-ondersteuning
font-display staat momenteel achter de vlag Experimental Web Platform Features in desktop Chrome 49 en wordt geleverd in Opera en Opera voor Android.
Demo
Bekijk het voorbeeld om font-display een kans te geven. Voor prestatiegerichte ontwikkelaars kan het nog een handig hulpmiddel zijn!