De font-displayeigenschap definieert hoe lettertypebestanden worden geladen en weergegeven door de browser. Het wordt toegepast op de @font-faceregel die aangepaste lettertypen in een stylesheet definieert.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Waarden
De font-displayeigenschap accepteert vijf waarden:
auto(standaard): hiermee kan de browser de standaardmethode voor laden gebruiken, die meestal vergelijkbaar is met deblockwaarde.block: Instrueert de browser om de tekst kort te verbergen totdat het lettertype volledig is gedownload. Nauwkeuriger gezegd, de browser tekent de tekst met een onzichtbare tijdelijke aanduiding en wisselt deze vervolgens met het aangepaste lettertype zodra deze wordt geladen. Dit wordt ook wel een "flits van onzichtbare tekst" of FOIT genoemd.swap: Instrueert de browser om het fallback-lettertype te gebruiken om de tekst weer te geven totdat het aangepaste lettertype volledig is gedownload. Dit wordt ook wel een "flits van tekst zonder stijl" of FOUT genoemd.fallback: Fungeert als een compromis tussen deautoenswapwaarden. De browser verbergt de tekst ongeveer 100 ms en gebruikt de fallback-tekst als het lettertype nog niet is gedownload. Het wisselt naar het nieuwe lettertype nadat het is gedownload, maar alleen tijdens een korte wisselperiode (waarschijnlijk 3 seconden).optional:fallbackDeze waarde vertelt de browser bijvoorbeeld om de tekst in eerste instantie te verbergen en vervolgens over te schakelen naar een reservelettertype totdat het aangepaste lettertype beschikbaar is voor gebruik. Deze waarde stelt de browser echter ook in staat om te bepalen of het aangepaste lettertype überhaupt wordt gebruikt, waarbij de verbindingssnelheid van de gebruiker als bepalende factor wordt gebruikt wanneer langzamere verbindingen het aangepaste lettertype minder snel ontvangen.
Hier is een andere manier om over hen na te denken
| Blokkeringsperiode | Wisselperiode | |
|---|---|---|
| blok | Kort | Oneindig |
| ruilen | Geen | Oneindig |
| terugvallen | Extreem kort | Kort |
| optioneel | Extreem kort | Geen |
Waarom we nodig hebben font-display
Voordat we brede ondersteuning hadden @font-face, was ons typografisch arsenaal beperkt tot lokale lettertypen, waarbij de enige beschikbare lettertypen de lettertypen waren die vooraf waren geladen op de computer van de eindgebruiker. We noemen deze "webveilige" lettertypen omdat de browser niets hoeft te downloaden om ze weer te geven.
Toen kwam de @font-faceregel die webdesigners en front-end-ontwikkelaars nieuwe typografische bevoegdheden gaf als nooit tevoren. Het stelde ons in staat om lettertypebestanden naar een server te uploaden en een reeks regels in onze stylesheets te schrijven die het lettertype een naam geven en de browser vertellen waar de bestanden moeten worden gedownload. Het gaf ook aanleiding tot diensten zoals Google Fonts die aangepaste lettertypen naar de massa brachten. Eindelijk was een grote hindernis die webdesign scheidde van printdesign, omvergeworpen!
Aangepaste lettertypen kwamen (en komen nog steeds) tegen een prijs. Lettertypebestanden kunnen groot zijn en de extra tijd die nodig is om de bestanden te downloaden, kan de prestaties van een site vertragen, vooral voor apparaten op een tragere netwerkverbinding. De extra kosten voor gebruikers met beperkte dataplannen werden ook een factor.
Een andere specifieke zorg die ontstond bij aangepaste lettertypen is wat een "flits van tekst zonder stijl" of kortweg FOUT werd genoemd. Browsers geven standaard een systeemlettertype weer terwijl ze wachten tot het aangepaste lettertype is gedownload. Hierdoor konden webpagina's sneller worden geladen, maar dit zorgde voor bezorgdheid bij webontwerpers die dit zagen als een kaping van de gebruikerservaring en een verkeerde voorstelling van het beoogde ontwerp. Webbrowsers verbergen tegenwoordig over het algemeen de tekst totdat het aangepaste lettertype is gedownload, wat we nu een "flits van onzichtbare tekst" of FOIT noemen.
Noch FOUT noch FOIT is geweldig. We hebben manieren om de prestaties van aangepaste lettertypen te optimaliseren om de effecten te vergemakkelijken. Nu moeten we font-displayde browser echter vertellen of we de voorkeur geven aan FOUT, FOIT of zelfs iets daartussenin.
Testen op ondersteuning
Interessant voorbehoud opgemerkt door Šime Vidas:
CSS font-display is een
@font-facedescriptor en geen eigenschap, dus de ondersteuning ervan in de browser kan niet worden getest met feature queries (CSS@supportsrule en CSS.supports API).
Meer informatie
- CSS Font Rendering Controls Module Level 1 Specificatie: Een concept van de specificatie voor de eigenschap.
font-displayvoor de massa: Jeremy Wagner heeft ons hier op CSS-Tricks kennis laten maken met het pand.- Gebruiken
@font-face: een uitgebreide uitleg van de regel en aanbevolen procedures voor het gebruik ervan. - Systeemlettertypestapel: een fragment om helemaal af te zien van aangepaste lettertypen en uitsluitend te vertrouwen op de systeemlettertypen van een gebruiker.
- Lettertypeprestaties regelen met
font-display: Een mooi artikel over het onderwerp door Google.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 60 | 58 | Nee | 79 | 11.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |