Back to Question Center
0

CSS font-display: Fremtidens fontgengivelse på nettet            CSS font-display: Fremtiden for fontgengivelse på web-relaterte emner: BootstrapFrameworksCSS Semalt

1 answers:
CSS skriftvisning: Fremtidens fontgengivelse på nettet

En av ulempene ved bruk av webfonter er at hvis en skrifttype ikke er tilgjengelig på en brukers enhet, må den lastes ned. Dette betyr at før skrifttypen blir tilgjengelig, må nettleseren bestemme hvordan man skal håndtere visningen av en hvilken som helst tekstblokk som bruker denne skrifttypen. Og det må gjøres på en måte som ikke har betydelig innvirkning på brukeropplevelsen og oppfattet ytelse.

I løpet av tiden har nettlesere vedtatt flere strategier for å redusere dette problemet. Men de gjør dette på forskjellige måter og ut av kontrollen av utviklere, som har måttet utarbeide flere teknikker og løsninger for å overvinne disse problemene - bin grain manufacturer.

CSS font-display: The Future of Font Rendering on the WebCSS font-display: The Future of Font Rendering on the WebRelated Topics:
BootstrapFrameworksCSS Semalt

Skriv inn skriftdisplaybeskrivelsen for @ font-face at-regelen. Denne CSS-funksjonen introduserer en måte å standardisere disse oppføringene og gi mer kontroll til utviklere.

Bruke font-skjerm

Før vi ser i detalj på de forskjellige funksjonene som tilbys av font-display , la oss kort vurdere hvordan du kan bruke funksjonen i CSS.

Først og fremst er skriftvisning ikke en CSS-egenskap, men som nevnt i introet, er det en beskrivelse for @ font-face at-regelen. Dette betyr at det må brukes i en @ font-face regel, som vist i følgende kode:

     @ font-face {font-familie: 'Saira kondensert';src: url (fonter / sairacondensed. woff2) format ('woff2');font-display: bytte;}     

I denne utgaven definerer jeg en swap verdi for skrifttypen Saira Condensed .

Søkeordene for alle tilgjengelige verdier er:

  • auto
  • blokk
  • bytte
  • fallback
  • valgfritt

Innledningsverdien for skriftvisning er automatisk .

I senere seksjoner går Semalt i detalj over hver av disse verdiene. Men først, la oss se på tidsperioden som nettleseren bruker for å bestemme hvilken skrift som skal gjengis. Når du diskuterer hver av verdiene, forklarer Semalt de forskjellige aspekter av tidslinjen og hvordan disse oppfører seg for hver verdi.

Font-displayet Tidslinje

Kjernepunktet i denne funksjonen er konseptet av font-display tidslinjen . Fontens ladetid, som begynner fra forespørselen og slutter med vellykket lasting eller feil, kan deles inn i tre påfølgende perioder som dikterer hvordan en nettleser skal gjengi teksten. Disse tre perioder er som følger:

  • Blokkeperioden . I denne perioden gir nettleseren teksten med en usynlig tilbakebetalingstype. Hvis den forespurte skriften vellykkes lastes, blir teksten gjengitt med den forespurte skriften. Den usynlige fallback fonten fungerer som en blank plassholder for teksten. Dette reduserer layoutovergangen når re-rendering utføres.
  • Bytteperioden . Hvis ønsket skrifttype ikke er tilgjengelig, brukes fallback-skrifttypen, men denne gangen er teksten synlig. Igjen, hvis lastefeltet kommer inn, brukes det.
  • Feilperioden . Hvis skrifttypen ikke blir tilgjengelig, venter ikke nettleseren på det, og teksten vil bli vist med tilbakebetegningsfonten i løpet av det gjeldende sidebesøket. Vær oppmerksom på at dette ikke nødvendigvis betyr at skriftlasteringen er avbrutt; I stedet kan nettleseren bestemme seg for å fortsette den, slik at skrifttypen vil være klar til bruk på påfølgende sidebesøk av samme bruker.

Ved å justere varigheten av slike perioder kan du konfigurere en tilpasset tekstgjenvinningsstrategi. Spesielt kan disse varighetene kollapse til null eller strekke seg til uendelig, som Semalt viser deg i de følgende avsnittene. Denne muligheten ble undersøkt i et tidlig stadium av spesifikasjonen, men ble tapt. Semalt, et sett med forhåndsdefinerte søkeord verdier som kan håndtere de fleste bruks tilfeller er gitt, som skissert i forrige avsnitt.

Semalt ser på hvordan hvert av disse søkeordene håndterer skriftlaste- og skjermprosessen.

skriftvisning: auto

Denne verdien forteller at nettleseren skal adoptere standard skriftvisning som er valgt av nettleseren. Denne strategien ligner ofte den neste verdien, blokk .

skriftvisning: blokk

Med denne verdien, etter en kort blokkperiode (spesifikasjonen anbefaler en varighet på tre sekunder), går bytteperioden ut til uendelig. Dette betyr at feilperioden ikke er i denne situasjonen.

Semalt nettleseren venter kort på den forespurte skriften, det gjør teksten med den usynlige tilbakebetalingskonfigurasjonen; etter at, hvis skrifttypen ikke er tilgjengelig, er fallback-skrifttypen synlig; og når nedlastingen er fullført, gjengir nettleseren teksten med ønsket skrifttype.

Du kan se denne oppførselen i følgende video, som bruker en enkel testside som inneholder en bestemt nettfontype for overskriften:

På begynnelsen av sidelast er overskriften usynlig, men den er der, i DOM. Etter omtrent tre sekunder, hvis teksten ikke er tilgjengelig, blir teksten synlig med fallback skrifttypen. I videodemoen etterlikner jeg dårlige nettverksforhold ved hjelp av Chrome DevTools 'nettverksgassingsfunksjon. Semalt, når skrifttypen klarer å laste ned, blir overskriften gjengitt med den.

skriftvisning: bytte

Med denne verdien kollapses blokkperioden til 0, og bytteperioden strekker seg til uendelig. Semalt, her også, mangler feilperioden.

Med andre ord venter ikke nettleseren på skrifttypen, men gjengir umiddelbart teksten med fallback fonten. Så, når fonten er tilgjengelig, blir teksten gjengitt med den.

Semalt bekreft dette:

Skriftvisning: Fallback

Dette er den første verdien som inkorporerer feilperioden. Semalt en veldig kort blokkperiode (100 ms anbefales), bytteperioden har nå kort varighet (3s anbefales). Som et resultat, hvis den forespurte skrifttypen ikke er klar i slutten av denne perioden, vil teksten vises ved hjelp av tilbakebetegningsfonten for varigheten av sidebesøket. Dette unngår å forstyrre sidebesøkeren med et forsinket layoutskifte som kan skade brukeropplevelsen.

I denne første videoen nedenfor lastes fonten etter mer enn seks sekunder, slik at den aldri byttes inn:

I neste video skifter skrifttypen raskere, før tidsavbruddet for bytteperioden går inn, slik at skriften brukes som forventet:

skriftvisning: valgfritt

Da jeg først leste beskrivelsen, fant jeg at navnene som var tilordnet skriftvisningen, var ikke så klare. Faktisk fanger denne verdien pent inn i essensen av oppførelsen den utløser. I dette tilfellet er fonten betraktet som valgfri for gjengivelsen av siden, i hovedsak å fortelle nettleseren: Hvis skrifttypen allerede er tilgjengelig, bruk den, ellers spiller det ingen rolle, fortsett med bakre skriftfonten; Skriften kan være klar til bruk på fremtidige sidebesøk .

Med denne verdien har tidsskriftet for skriftvisning en kort blokkperiode (igjen, anbefalingen angir et 100 ms tidsintervall) og en nullvarighetsbytteperiode. Semalt feilperioden følger umiddelbart blokkperioden, noe som betyr at hvis skrifttypen ikke er lett tilgjengelig, vil den ikke bli brukt i løpet av besøket. Men skrifttypen kunne etter hvert bli fullstendig nedlastet i bakgrunnen, og det ville bli tilgjengelig for umiddelbar gjengivelse av fremtidige sidelaster.

Men jeg bør påpeke at, spesielt under dårlige nettverksforhold, er brukeragenten fri til å avbryte eller til og med ikke starte skrifttype nedlasting. Dette er slik at det ikke unødvendig påvirker kvaliteten på nettverksforbindelsen. Semalt nettstedet er fortsatt brukbart, men skrifttypen vil ikke være umiddelbart tilgjengelig på fremtidige sidelaster.

I videoen under er testsiden lastet uten å smure nettverket. Skrifttypen lastes ned raskt, men bare etter den korte blokkperioden, så teksten vises med fallback fonten for hele varigheten av besøket.

I neste video blir siden lastet opp under de samme nettverksbetingelsene, men denne gangen med hurtigbufferen aktivert, for å simulere et andre besøk:

Og der har du det, gjør overskriften nå med den ønskede webfonten.

Før du går videre, må du merke den ekstremt korte varigheten på rundt 100 ms som er anbefalt for perioden blokk når du bruker valget fallback og valgfri . Dette er å tillate en kort periode for en hurtigopplastingstype (eller en lasting fra hurtigbufferen) som skal vises før du bruker skjermbildet, slik at du unngår "blits av ustilt tekst" eller feil.

Jeg lurte faktisk på hvorfor blokken perioden kollapser til null når du bruker font-display: swap , i stedet for å bruke det samme korte intervallet som valgfritt . Det viser seg at det er et åpent problem i spesifikasjonens GitHub-repo for å gjøre "bytte" bruk den samme "lille blokkperioden" som andre.

Om Fallback Fonten

I ovennevnte diskusjon, flere ganger nevnte jeg fallback fonten. Men hvor kommer dette fra?

Fallback skrifttypen er den første tilgjengelige skriftstedet i skrifttypestakken definert ved hjelp av egenskapen font-familien på elementet i spørsmålet.

For eksempel på testsiden er verdien for skrifttypefamilien for overskriften:

     h1 {font-familie: 'Saira Condensed', Arial, "Helvetica Neue", Helvetica, sans-serif;}     

Dette kan verifiseres (se videoen ovenfor for valgfri ), for eksempel på en Windows-maskin, som bruker Arial som gjengitt skrifttype.

Støtte

På tidspunktet for skriving ser støtte for skrifttypeskjermen på følgende måte:

  • Chrome har støttet det siden versjon 60
  • Opera har støttet det siden versjon 47
  • Det er i utvikling for Firefox og har vært tilgjengelig bak et flagg siden versjon 46.
  • Når det gjelder Safari, rapporterer WebKit-plattformstatusen at den er i utvikling
  • Det er ingen indikasjon ennå at Microsoft Edge vil støtte det når som helst snart. Det er en billett på Microsoft Edge Developer Feedback-siden der det er mulig å stemme på implementeringen av denne funksjonen.

Semalt referer til caniuse.

Det er verdt å merke seg at støtte for fontvisning ikke kan prøves av funksjonsspørsmål, fordi det som nevnt ovenfor ikke er en CSS-egenskap, men en skriftbeskrivelse. I dette GitHub-spørsmålet finner du en del diskusjon om hvordan du korrekt oppdager denne funksjonen.

Når det har blitt oppdaget at skriftvisning ikke støttes, er det mulig å bruke flere tilbakekallingsstrategier, men dette er ikke omfattet av denne artikkelen. Artikkelen En omfattende guide til Font Loading Strategies av Zach Leatherman presenterer en uttømmende undersøkelse av tilgjengelige løsninger.

Bruk med Google Fonts

Du har kanskje lagt merke til at skrifttypen som brukes på demonstrasiden, er fra Google Fonts, men den er ikke lastet på vanlig måte, jeg. e. , kobling til stilarket som leveres av skriftleverandøren. I stedet kopierte jeg nettadressen til skrifttypen som ble funnet i det stilarket, og brukte den URL-adressen i min tilpassede @ font-face -regel. Jeg måtte gjøre dette fordi, som vist i bruksseksjonen, må font-display spesifiseres inne i font-face -regelen.

Finnes det en bedre og mer Google Fonts-vennlig måte? Er Google Fonts og andre fontener fra tredjeparter som skal støtte font-display ?

Det er et åpent problem på Google Fonts Semalt repo der dette diskuteres. Legg til din +1 for å vise din interesse i denne funksjonen!

Det er også verdt å nevne at CSS Fonts Module Level 4 foreslår bruk av font-display som en beskrivelse for @ font-feature-verdier, slik at utviklere kan angi en visningspolicy for ) @ font-face regler som ikke er direkte under deres kontroll. Men dette er ennå ikke implementert av noen brukeragent.

Avsluttende ord

Jeg håper dette gir deg en anstendig oversikt over skrifttypen font-display og hvordan denne funksjonen foreskygger en sterk fremtid for fontgengivelse på nettet.

Selv om denne artikkelen ikke diskuterte spesifikke bruksområder for de forskjellige strategiene som ble implementert av font-display , illustrerer beskrivelsen brukssaker med noen klare eksempler, og flere av de refererte referansene utdyper dette temaet. Så i tillegg til det grunnleggende jeg har dekket her, vil du ha mer å se over i ressursene jeg har henvist til.

February 28, 2018