We nemen tegenwoordig weblettertypen als vanzelfsprekend. We hebben niet altijd de mogelijkheid gehad om onze tekst in bijna elk lettertype in te stellen. Ik bedoel, we zouden kunnen, maar dan zouden we moeten zuchten en zeggen: "Wel, dat zal goed uitzien op de computers van vijf mensen. Ik hoop dat iedereen Verdana leuk vindt! "
Weblettertypen brachten een aantal broodnodige variëteit aan het gezien, een paar misbruiken van typografie, wat extra pagina gewicht als de lettertypen zelf werden geladen, en flitsen van onstabiele of onzichtbare tekst. Nou ... omelet, eieren, kapot, je snapt het. Het zou gebeuren.
Als gebruikers te lang naar een blanco pagina kijken, besluiten ze misschien om te vertrekken
Het is echter een probleem met de bruikbaarheid wanneer tekst onzichtbaar is totdat het aangepaste lettertype is geladen. Als gebruikers te lang naar een lege pagina kijken (en te lang kan milliseconden zijn) besluiten ze misschien om te vertrekken. En dat is eerlijk genoeg. Het is niet gebruiksvriendelijk.
Een paar jaar snel vooruit en we boeken vooruitgang bij het beheren van de manier waarop lettertypen worden geladen. Tot nu toe hebben we dit gedaan met bibliotheken en API's van derden. Maar nu komt eindelijk deze functionaliteit naar CSS.
Voer de eigenschap font-display in. Het is momenteel alleen in Opera, Opera voor Android en Chrome. (Het werd voor het eerst geïntroduceerd in Chrome 49 als een experimentele functie.)
Het wordt geleverd met vier opties: auto , swap , fallback en optioneel .
Kortom, het kiezen van font-display: auto zal de browser verlaten om te handelen zoals het nu gebeurt. Tekst zal onzichtbaar zijn totdat het aangepaste lettertype wordt geladen.
swap is waarschijnlijk wat de meeste mensen zullen gebruiken. Als het lettertype niet is geladen, wordt het volgende beschikbare lettertype gebruikt dat is gedefinieerd in de eigenschap font-family . Wanneer het weblettertype wordt geladen, wordt het vervangen. Dit is in feite een flits van niet-gestileerde inhoud, maar dat is gebruiksvriendelijker dan onzichtbare inhoud, denk ik.
fallback splitst het verschil tussen die eerste twee opties. Voor een vertraging van 100 milliseconden is de tekst onzichtbaar. Als het aangepaste lettertype dan is geladen, wordt het gebruikt. Als dit niet het geval is, wordt het volgende lettertype in de regelreeks gevolgd totdat het aangepaste lettertype is geladen.
optioneel werkt als fallback, behalve dat de browser beslist om het aangepaste lettertype helemaal niet te laden als de verbinding van de gebruiker te traag is
optioneel werkt als fallback, behalve dat de browser beslist om het aangepaste lettertype helemaal niet te laden als de verbinding van de gebruiker te traag is.
En daar hebben we het. declaration. Let op, het display-lettertype is bedoeld om gebruikt te worden in een @ font-face verklaring. Dat betekent dat het voorlopig niet zal werken met externe lettertypeaanbieders zoals Typekit of Google Fonts. Zodra de weergave van het lettertype echter algemener wordt, is het waarschijnlijk dat ze een soort van optie voor deze functie zullen implementeren.