De font-displayejendom definerer, hvordan skrifttype filer er indlæst og vises af browseren. Det anvendes på @font-facereglen, der definerer brugerdefinerede skrifttyper i et typografiark.
@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ærdier
Den font-displayejendom accepterer fem værdier:
auto(standard): Gør det muligt for browseren at bruge sin standardmetode til indlæsning, som ofte svarer tilblockværdien.block: Opfordrer browseren til kort at skjule teksten, indtil skrifttypen er downloadet fuldt ud. Mere præcist tegner browseren teksten med en usynlig pladsholder og bytter den derefter med det brugerdefinerede skrifttype, så snart den indlæses. Dette er også kendt som en “flash af usynlig tekst” eller FOIT.swap: Opfordrer browseren til at bruge reservetypen til at vise teksten, indtil den brugerdefinerede skrifttype er downloadet fuldt ud. Dette er også kendt som en “flash af ustyleret tekst” eller FOUT.fallback: Fungerer som et kompromis mellemautoogswapværdier. Browseren skjuler teksten i cirka 100 ms, og hvis skrifttypen endnu ikke er downloadet, vil den anvende reserveteksten. Den bytter til den nye skrifttype, når den er downloadet, men kun i en kort swap-periode (sandsynligvis 3 sekunder).optional: Ligesomfallbackfortæller denne værdi browseren, at den oprindeligt skjuler teksten og derefter overgår til en reservefont, indtil den tilpassede skrifttype er tilgængelig til brug. Denne værdi giver dog også browseren mulighed for at bestemme, om den brugerdefinerede skrifttype overhovedet bruges, ved hjælp af brugerens forbindelseshastighed som en afgørende faktor, hvor langsommere forbindelser er mindre tilbøjelige til at modtage den tilpassede skrifttype.
Her er en anden måde at tænke på dem på
| Bloker periode | Byt periode | |
|---|---|---|
| blok | Kort | Uendelig |
| bytte rundt | Ingen | Uendelig |
| Falde tilbage | Ekstremt kort | Kort |
| valgfri | Ekstremt kort | Ingen |
Hvorfor vi har brug for font-display
Før vi havde bred støtte til @font-face, var vores typografiske arsenal begrænset til lokale skrifttyper, hvor de eneste tilgængelige skrifttyper var dem, der blev forudindlæst på slutbrugerens computer. Vi kalder disse “websikre” skrifttyper, fordi browseren ikke behøver at downloade noget for at de kan gengives.
Derefter kom @font-facereglen, der gav webdesignere og front-end-udviklere nye typografiske kræfter i modsætning til nogensinde før. Det tillod os at uploade skrifttypefiler til en server og skrive et sæt regler i vores stilark, der navngiver skrifttypen og fortæller browseren, hvor filerne skal downloades. Det gav også anledning til tjenester som Google Fonts, der bragte brugerdefinerede skrifttyper til masserne. Endelig var en stor forhindring, der adskilt webdesign fra printdesign, væltet!
Dog tilpassede skrifttyper kom (og fortsætter med at komme) til en pris. Fontfiler kan være store, og den ekstra tid til at downloade filerne kan nedsætte ydeevnen på et websted, især for enheder med en langsommere netværksforbindelse. De ekstra omkostninger for brugere på begrænsede dataplaner blev også en faktor.
En anden særlig bekymring, der opstod med brugerdefinerede skrifttyper, er, hvad der blev kaldt en "flash af ustylet tekst" eller FOUT for kort. Browsere vil som standard vise en systemskrifttype, mens de venter på, at den tilpassede skrifttype downloades. Dette gjorde det muligt for websider at indlæse hurtigere, men rejste bekymring blandt webdesignere, der betragtede dette som kapring af brugeroplevelsen og forkert præsentation af det tilsigtede design. Webbrowsere i dag skjuler generelt teksten, indtil den brugerdefinerede skrifttype er downloadet, hvilket vi nu omtaler som en “flash af usynlig tekst” eller FOIT.
Hverken FOUT eller FOIT er fantastisk. Vi har måder at optimere ydelsen på brugerdefinerede skrifttyper for at lette effekterne. Men nu er vi nødt font-displaytil at fortælle browseren, om vi foretrækker FOUT, FOIT eller endda noget derimellem.
Test for support
Interessant advarsel bemærket af Šime Vidas:
CSS font-display er en
@font-facedeskriptor og ikke en egenskab, så dens support i browseren kan ikke testes med funktionsforespørgsler (CSS-@supportsregel og CSS.supports API).
Mere information
- CSS Font Rendering Controls Module Level 1 Specification: A draft of the specification for the property.
font-displaytil masserne: Jeremy Wagner introducerede os til ejendommen her på CSS-Tricks.- Brug
@font-face: En omfattende forklaring af reglen og bedste praksis for, hvordan du bruger den. - System Font Stack: Et uddrag til helt at give afkald på brugerdefinerede skrifttyper og udelukkende stole på en brugers systemfonte.
- Kontrol af skrifttypepræstation med
font-display: En fin beskrivelse af emnet fra Google.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 60 | 58 | Ingen | 79 | 11.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |