De font-displayfastighets definierar hur typsnittsfiler laddas och visas av webbläsaren. Den tillämpas på @font-faceregeln som definierar anpassade teckensnitt i ett formatmall.
@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 */ )Värden
Den font-displayfastighet accepterar fem värden:
auto(standard): Låter webbläsaren använda sin standardmetod för laddning, som oftast liknarblockvärdet.block: Instruerar webbläsaren att kort dölja texten tills teckensnittet har laddats ner helt. Mer exakt drar webbläsaren texten med en osynlig platshållare och byter den sedan med det anpassade teckensnittet så snart det laddas. Detta är också känt som en "blixt av osynlig text" eller FOIT.swap: Instruerar webbläsaren att använda reservteckensnittet för att visa texten tills det anpassade teckensnittet har laddats ner helt. Detta är också känt som en "flash of unstyled text" eller FOUT.fallback: Fungerar som en kompromiss mellanautoochswapvärderingar. Webbläsaren döljer texten i cirka 100 ms och, om teckensnittet ännu inte har laddats ner, kommer reservtexten att användas. Det byter till det nya teckensnittet efter att det har laddats ner, men bara under en kort bytesperiod (förmodligen 3 sekunder).optional: Liksomfallbacksäger detta värde webbläsaren att först dölja texten och sedan övergå till ett reservteckensnitt tills det anpassade teckensnittet är tillgängligt att använda. Men det här värdet gör det också möjligt för webbläsaren att avgöra om det anpassade teckensnittet ens används alls, med användarens anslutningshastighet som en avgörande faktor där långsammare anslutningar är mindre benägna att få det anpassade teckensnittet.
Här är ett annat sätt att tänka på dem
| Blockperiod | Byt period | |
|---|---|---|
| blockera | Kort | Oändlig |
| byta | Ingen | Oändlig |
| Retirera | Extremt kort | Kort |
| frivillig | Extremt kort | Ingen |
Varför vi behöver font-display
Innan vi hade ett brett stöd för @font-facevar vår typografiska arsenal begränsad till lokala teckensnitt, där de enda tillgängliga teckensnitten var de som förinstallerade på slutanvändarens dator. Vi kallar dessa "webbsäkra" teckensnitt eftersom webbläsaren inte behöver ladda ner någonting för att de ska återges.
Sedan kom @font-faceregeln som gav webbdesigners och front-end-utvecklare nya typografiska befogenheter till skillnad från någonsin tidigare. Det gjorde det möjligt för oss att ladda upp teckensnittsfiler till en server och skriva en uppsättning regler i våra stilark som ger teckensnittet namn och berättar för webbläsaren var filerna ska laddas ner. Det gav också upphov till tjänster som Google-teckensnitt som gav anpassade teckensnitt till massorna. Slutligen hade ett stort hinder som skilde webbdesign från tryckdesign tippats!
Men anpassade teckensnitt kom (och fortsätter att komma) till en kostnad. Teckensnittsfiler kan vara stora och den extra tiden att ladda ner filerna kan bromsa webbplatsens prestanda, särskilt för enheter med långsammare nätverksanslutning. Den extra kostnaden för användare på begränsade dataplaner blev också en faktor.
En annan speciell oro som uppstod med anpassade teckensnitt är vad som kallades en "flash of unstyled text" eller FOUT för kort. Webbläsare skulle som standard visa ett systemteckensnitt medan de väntar på att det anpassade teckensnittet ska laddas ner. Detta gjorde att webbsidor kunde laddas snabbare men väckte oro bland webbdesigners som betraktade detta som kapning av användarupplevelsen och felaktig framställning av den avsedda designen. Webbläsare idag döljer i allmänhet texten tills det anpassade teckensnittet laddas ner, vilket vi nu kallar ”en blixt av osynlig text” eller FOIT.
Varken FOUT eller FOIT är bra. Vi har sätt att optimera prestanda för anpassade teckensnitt för att underlätta effekterna. Nu måste vi dock font-displayberätta för webbläsaren om vi föredrar FOUT, FOIT eller till och med något däremellan.
Testar för support
Intressant påminnelse noterad av Šime Vidas:
CSS font-display är en
@font-facebeskrivare och inte en egendom, så dess stöd i webbläsaren kan inte testas med funktionsfrågor (CSS-@supportsregel och CSS.supports API).
Mer information
- CSS Font Rendering Controls Module Level 1 Specification: Ett utkast till specifikationen för fastigheten.
font-displayför massorna: Jeremy Wagner introducerade oss till fastigheten här på CSS-Tricks.- Användning
@font-face: En omfattande förklaring av regeln och bästa praxis för hur man använder den. - Systemtypstapel: Ett utdrag för helt och hållet att avstå från anpassade teckensnitt och enbart förlita sig på en användares systemteckensnitt.
- Kontrollera teckensnittsprestanda med
font-display: En fin skrivning om ämnet av Google.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 60 | 58 | Nej | 79 | 11.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |