Hey Hey `font-display`

0
39

Y ‘ all vet om font-skjerm? Det er ganske stor. Det er en CSS-egenskapen at du kan bruke innen @font-face blokker for å kontrollere hvordan, visuelt, som skriften laster. Skriften legger i, er egentlig ganske jævla komplisert. Her er en guide fra Zach Leatherman å bevise det, som inneholder over 10 skrift legge strategier, inkludert strategier som involverer kritisk inline CSS av undergrupper av skrifter kombinert med lasting resten av skrifter senere gjennom JavaScript. Det er ikke noen tur i parken.

Ved hjelp av font-skjermen er litt som en spasertur i parken om. Det er bare en enkelt linje med CSS. Det trenger ikke løse alt som Zach ‘ s mer eksotiske demoer gjøre, men det kan gå en lang vei med som en linje. Det er bemerkelsesverdig å få opp akkurat nå, som støtte har forbedret seg mye i det siste. Det er nå i Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+ og Chrome på Android 64+. Ganske bra.

Hva får du fra det? Evnen til å kontrollere FOUT og FOIT som er riktig for ditt prosjekt, to ting som begge ganske suge i forhold til skrift lasting. Vi har et par innlegg om det her:

  • font-display for Massene av Jeremy Wagner
  • Hvis du virkelig misliker FOUT, font-skjerm: valgfritt kan være din syltetøy av meg

Påminnelse:

FOUT = Blits av Unstyled Tekst
FOIT = Blits av Usynlig Tekst

Det er heller ikke stor. I en perfekt verden, våre tilpassede fonter bare møt opp umiddelbart. Men siden det ikke er en praktisk mulighet, vi plukke basert på våre prioriteringer.

Den beste ressursen ut om det er Monica Dinculescu er explainer side:

jeg vil oppsummere de verdier valg som dette:

  • Hvis du er OK med FOUT, er du sannsynligvis best av med font-skjerm: bytt; som vil vise et tilbakefall skrift ganske fort, men bytte i din tilpasset skrifttype når den er lastet inn.
  • Hvis du er OK med FOIT, er du sannsynligvis best av med font-display: block; noe som er ganske lik nåværende nettleser atferd, hvor det viser ingenting, så den venter på tilpasset skrifttype, men vil til slutt falle tilbake.
  • Hvis du bare vil at den tilpassede skrift for å vise i det hele tatt hvis den er der umiddelbart, font-skjerm: valgfritt; er det du ønsker. Det vil fortsatt legge seg i bakgrunnen og være der neste side legg sannsynligvis.

De er noen ganske anstendig valg for en enkelt linje med CSS. Men igjen, husk hvis du kjører en stor tekst-tunge området med tilpassede fonter, Zach ‘ s guide kan hjelpe deg med å gjøre mer.

Jeg vil nesten gå ut på en lem, og si: hver @font-face blokkere ut det bør ha en skrift-vis eiendom. Med det eneste forbeholdet er at du gjør noe eksotisk og for noen grunn, vil nettleseren standard virkemåte.

Ønsker å høre noe ganske uheldig? Vi har allerede nevnt font-display: block;. Ville ikke du tror det, eh, vel, blokkert gjengivelse av teksten til tilpasset skrifttype laster? Det har det ikke. Det er fortsatt fikk en swap periode. Det ville være den perfekte tingen for noe som ikonet skrifter der ikonet (sannsynligvis) har ingen mening med mindre tilpasset skrifttype laster. Akk, det er ingen skrift-skjermen løsning for det.

Og, hei verden, ville ikke det være fint om Google Skrifter tillatt oss å bruke det?