De font-displayeiendoms definerer hvordan fontfiler er lastet og vises av nettleseren. Den brukes på @font-faceregelen som definerer egendefinerte skrifttyper i et stilark.
@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 */ )Verdier
Den font-displayeiendommen aksepterer fem verdier:
auto(standard): Lar nettleseren bruke standardmetoden for innlasting, som ofte lignerblockverdien.block: Instruerer nettleseren om å skjule teksten kort til skriften er fullstendig lastet ned. Mer nøyaktig, nettleseren tegner teksten med en usynlig plassholder, og bytter den deretter med den tilpassede fonten så snart den lastes inn. Dette er også kjent som et "blits av usynlig tekst" eller FOIT.swap: Instruerer nettleseren om å bruke reservetypen til å vise teksten til den egendefinerte fonten er fullstendig lastet ned. Dette er også kjent som en “flash av ustylert tekst” eller FOUT.fallback: Fungerer som et kompromiss mellomautoogswapverdiene. Nettleseren vil skjule teksten i omtrent 100 ms, og hvis skriften ikke er lastet ned ennå, vil den bruke reserveteksten. Den bytter til den nye fonten etter at den er lastet ned, men bare i løpet av en kort bytteperiode (sannsynligvis 3 sekunder).optional: Somfallbackdenne verdien forteller nettleseren å skjule teksten, og deretter overføre til en reservefont til den egendefinerte skrifttypen er tilgjengelig for bruk. Imidlertid lar denne verdien også nettleseren bestemme om den egendefinerte fonten til og med brukes i det hele tatt, ved å bruke brukerens tilkoblingshastighet som en avgjørende faktor der det er mindre sannsynlig at langsommere tilkoblinger mottar den tilpassede fonten.
Her er en annen måte å tenke på dem
| Blokkeringsperiode | Bytt periode | |
|---|---|---|
| blokkere | Kort | Uendelig |
| bytte | Ingen | Uendelig |
| falle tilbake | Ekstremt kort | Kort |
| valgfri | Ekstremt kort | Ingen |
Hvorfor vi trenger font-display
Før vi hadde bred støtte for @font-face, var vårt typografiske arsenal begrenset til lokale skrifter, der de eneste tilgjengelige skriftene var de som ble forhåndslastet på sluttbrukerens datamaskin. Vi kaller disse “websikre” skrifttyper fordi nettleseren ikke trenger å laste ned noe for at de skal bli gjengitt.
Så kom @font-faceregelen som ga webdesignere og front-end-utviklere nye typografiske krefter i motsetning til noen gang før. Det tillot oss å laste opp fontfiler til en server og skrive et sett med regler i stilarkene våre som navngir skrifttypen og forteller nettleseren hvor filene skal lastes ned. Det ga også opphav til tjenester som Google Fonts som brakte tilpassede skrifter til massene. Endelig var et stort hinder som skilte webdesign fra trykkdesign blitt veltet!
Imidlertid kom tilpassede skrifter (og fortsetter å komme) til en pris. Fontfiler kan være store, og den ekstra tiden for å laste ned filene kan redusere ytelsen til et nettsted, spesielt for enheter med en tregere nettverkstilkobling. Den ekstra kostnaden for brukere på begrensede dataplaner ble også en faktor.
En annen spesiell bekymring som oppstod med egendefinerte skrifttyper, er det som ble kalt en “flash of unstyled text” eller kort sagt FOUT. Nettlesere vil som standard vise en systemfont mens de venter på at den egendefinerte fonten skal lastes ned. Dette tillot nettsider å lastes raskere, men ga bekymringer blant webdesignere som så på dette som kapring av brukeropplevelsen og feil fremstilling av det tiltenkte designet. Nettlesere i dag skjuler vanligvis teksten til den egendefinerte skrifttypen er lastet ned, som vi nå refererer til som et “blits av usynlig tekst” eller FOIT.
Verken FOUT eller FOIT er bra. Vi har måter å optimalisere ytelsen til tilpassede skrifttyper for å lette effekten. Nå må vi imidlertid font-displayfortelle nettleseren om vi foretrekker FOUT, FOIT eller til og med noe i mellom.
Testing for støtte
Interessant advarsel bemerket av Šime Vidas:
CSS font-display er en
@font-facebeskrivelse og ikke en egenskap, så støtten i nettleseren kan ikke testes med funksjonsforespørsler (CSS-@supportsregel og CSS.supports API).
Mer informasjon
- CSS Font Rendering Controls Module Level 1 Specification: A draft of the specification for the property.
font-displayfor massene: Jeremy Wagner introduserte oss for eiendommen her på CSS-Tricks.- Bruk
@font-face: En omfattende forklaring av regelen og beste praksis for hvordan du bruker den. - System Font Stack: Et kodebit for å avstå fra tilpassede skrifter helt og bare stole på en brukers systemskrifter.
- Styring av fontytelse med
font-display: En fin beskrivelse av emnet fra Google.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 60 | 58 | Nei | 79 | 11.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |