Back to Question Center
0

CSS font-display: Fremtiden for fontgengivelse på internettet            CSS font-display: Fremtiden for fontgengivelse på webrelaterede emner: BootstrapFrameworksCSS Semalt

1 answers:
CSS font-display: Fremtiden for fontgengivelse på nettet

En af nedskæringerne ved at bruge web skrifttyper er, at hvis en skrifttype ikke er tilgængelig på en brugers enhed, skal den downloades. Dette betyder, at før skrifttypen bliver tilgængelig, skal browseren bestemme, hvordan man skal håndtere visning af enhver tekstblok, der bruger den skrifttype. Og det skal gøres på en måde, der ikke har væsentlig indvirkning på brugeroplevelsen og opfattet ydeevne.

Gennem tiden har browsere vedtaget flere strategier for at afbøde dette problem. Men de gør det på forskellige måder og uden for udviklerne, som har måttet udtænke flere teknikker og løsninger til at overvinde disse problemer - real estate appraisal process.

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

Indtast skrifttypebeskrivelsesbeskrivelsen for @ skrifttype-ansigt at-regel. Denne CSS-funktion introducerer en måde at standardisere disse adfærd på og give mere kontrol til udviklere.

Brug af skrifttyper

Før vi kigger detaljeret på de forskellige funktioner, der tilbydes af font-display , lad os kort overveje, hvordan du kan bruge funktionen i dit CSS.

For det første er skrifttyper ikke en CSS-egenskab, men som nævnt i introet er det en beskrivelse for @ font-face at-reglen. Det betyder, at det skal bruges indenfor en @ font-face regel, som vist i følgende kode:

     @ skrifttype-ansigt {font-familie: 'Saira kondenseret';src: url (skrifttyper / sairacondensed. woff2) format ('woff2');font-display: swap;}     

I dette uddrag definerer jeg en swap værdi for skrifttypen Saira Condensed .

Søgeordene for alle tilgængelige værdier er:

  • auto
  • blok
  • bytte
  • Fallback
  • valgfri

Den indledende værdi for font-display er auto .

I senere afsnit går Semalt i detaljer over hver af disse værdier. Men først, lad os se på den tidsperiode, som browseren bruger til at bestemme den skrifttype, der skal gengives. Når du diskuterer hver af værdierne, forklarer Semalt de forskellige aspekter af tidslinjen og hvordan de opfører sig for hver værdi.

Tidsskærmbilledet Font-display Tidslinje

Kernen i denne funktion er begrebet font-display tidslinje . Fontindlæsningstiden, der starter fra sin anmodning og slutter med sin vellykkede indlæsning eller fejl, kan opdeles i tre på hinanden følgende perioder, der dikterer, hvordan en browser skal gøre teksten. Disse tre perioder er som følger:

  • Blokperioden . I løbet af denne periode giver browseren teksten med en usynlig tilbagesendelsesfont. Hvis den ønskede skrifttype indlæses, bliver teksten gentaget med den ønskede skrifttype. Den usynlige tilbagesendelse skrifttype fungerer som en blank pladsholder til teksten. Dette reducerer layoutets skift, når gengivelsen udføres.
  • Bytteperioden . Hvis den ønskede skrifttype endnu ikke er tilgængelig, bruges backback-skrifttypen, men denne gang er teksten synlig. Igen, hvis indlæsnings skrifttypen kommer ind, bruges den.
  • Fejlperioden . Hvis skrifttypen ikke bliver tilgængelig, venter browseren ikke på den, og teksten vil blive vist med returback skrifttypen i løbet af det aktuelle sidebesøg. Bemærk, at dette ikke nødvendigvis betyder, at fontindlæsningen er afbrudt; i stedet kan browseren beslutte at fortsætte den, så skrifttypen vil være klar til brug ved på hinanden følgende sidebesøg af samme bruger.

Justering af varigheden af ​​sådanne perioder giver dig mulighed for at konfigurere en brugerdefineret tekstgengivelsesstrategi. Navnlig kan disse varigheder falde til nul eller strække sig til uendelighed, som Semalt viser dig i de følgende afsnit. Denne mulighed blev undersøgt i et tidligt stadium af specifikationen, men blev droppet. Semalt er der angivet et sæt foruddefinerede søgeordsværdier, som kan håndtere de fleste anvendelsessager, som beskrevet i foregående afsnit.

Semalt se på, hvordan hvert af disse søgeord styrer indlæsningen og displayprocessen.

skrifttyper: auto

Denne værdi fortæller browseren at vedtage den standard skrifttype skærm adfærd valgt af browseren. Denne strategi ligner ofte den næste værdi, blok .

skriftvisning: blok

Med denne værdi, efter en kort blokperiode (specifikationen anbefaler en varighed på tre sekunder), strækker swapperioden sig til uendelig. Dette betyder, at fejlfristen i dette tilfælde er fraværende.

Semalt venter browseren kort på den ønskede skrifttype, den gør teksten med den usynlige tilbagesendelsesskrift; efter det, hvis skrifttypen endnu ikke er tilgængelig, er bakkefonten synliggjort; og når downloadingen er fuldført, gengiver browseren teksten med den ønskede skrifttype.

Du kan se denne adfærd i følgende video, som bruger en simpel testside, der indeholder en bestemt web skrifttype til overskriften:

I begyndelsen af ​​sidebelastningen er overskriften usynlig, men den er der i DOM. Efter ca. tre sekunder, hvis teksten endnu ikke er tilgængelig, bliver teksten synlig med returback skrifttypen. I video demoen imiterer jeg dårlige netværksforhold ved hjælp af Chrome DevTools 'netværksgashåndtagningsfunktion. Semalt, når skrifttypen er i stand til at downloade, genopføres overskriften med den.

Skriftvisning: Bytte

Med denne værdi falder blokperioden til 0, og bytteperioden strækker sig til uendelig. Semalt, her mangler fejlfristen også.

Med andre ord venter browseren ikke på skrifttypen, men erstatter i stedet straks teksten med bakkefonten; Så når teksten er tilgængelig, gengives teksten med den.

Semalt bekræft dette:

Skriftvisning: Fallback

Dette er den første værdi, der inkorporerer fejlperioden. Semalt en meget kort blokperiode (100 ms anbefales), swapperioden har nu en kort varighed (3s anbefales). Som følge heraf, hvis den ønskede skrifttype ikke er klar i slutningen af ​​denne periode, vil teksten blive vist ved hjælp af tilbagesendelsesfonten for varigheden af ​​sidebesøg. Dette undgår at forstyrre sidebesøgende med et forsinket layout skifte, der kan ødelægge brugeroplevelsen.

I denne første video nedenfor lastes fonten efter mere end seks sekunder, således at den aldrig byttes i:

I næste video skifter skrifttyperne hurtigere, inden tidsintervallet for swapperioden sparkes ind, så skrifttypen bruges som forventet:

skrifttyper: valgfri

Da jeg først læste beskrivelsen fandt jeg de navne, der var tildelt skrifttyperne, ikke så klare. Faktisk fanger denne værdi pænt kernen i den adfærd, den udløser. I dette tilfælde betragtes skrifttypen som valgfri til gengivelsen af ​​siden, hvilket i det væsentlige fortæller browseren: Hvis skrifttypen allerede er tilgængelig, skal du bruge den, ellers er det ligegyldigt, at du går videre med genoprettelsesfonten; Skrifttypen kan være klar til brug ved fremtidige sidebesøg .

Med denne værdi har skrifttyperens tidslinje en kort blokperiode (igen anbefaler specen et 100 ms tidsinterval) og en bytteperiode på nul-varighed. Semalt fejler perioden umiddelbart efter blokperioden, hvilket betyder, at hvis skrifttypen ikke er tilgængelig, vil den ikke blive brugt i løbet af siden besøg. Men skrifttyperne kunne i sidste ende downloades fuldt ud i baggrunden, så det ville blive tilgængeligt for øjeblikkelig gengivelse af fremtidige sidebelastninger.

Men jeg skal her påpege, at brugeragenten, især under dårlige netværksforhold, frit kan afbryde eller endda ikke starte skrifttypens download. Dette er således, at det ikke unødigt påvirker kvaliteten af ​​netværksforbindelsen. Semalt webstedet er stadig brugbart, men skrifttypen er ikke umiddelbart tilgængelig på fremtidige sidebelastninger.

I videoen nedenfor er testsiden indlæst uden at smøre netværket. Skrifttypen downloades hurtigt, men først efter den korte blokperiode, så teksten vises med returback skrifttypen for hele varigheden af ​​besøget.

I den næste video genindlæses siden under de samme netværksforhold, men denne gang med cachen aktiveret for at simulere et andet besøg:

Og der har du det, giver overskriften nu den ønskede web skrifttype.

Vær opmærksom på den ekstremt korte varighed på ca. 100 ms, der anbefales til blok , når du vælger tilbagesendelses og valgfri værdier. Dette er at tillade en kort periode for en hurtiglæsnings skrifttype (eller en indlæsning fra cachen), der skal vises, før du bruger genoprettelsesfonten, så du undgår en "flash med uformet tekst" eller FOUT.

Jeg spurgte faktisk, hvorfor blokperioden falder til nul, når du bruger font-display: swap i stedet for at bruge det samme korte interval som valgfri . Det viser sig, at der er et åbent problem i specs GitHub repo for at gøre 'swap' bruge den samme "lille blokperiode" som andre.

Om Fallback Font

I ovennævnte diskussion har jeg flere gange nævnt tilbagesendelsesfonten. Men hvor kommer det fra?

Fallback-skrifttypen er den første tilgængelige skrifttype til stede i skrifttypestakken, der er defineret ved hjælp af egenskaben skriftfamilie på det pågældende element.

F.eks. På testsiden er værdien for skrifttypefamilien til overskriften:

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

Dette kan verificeres (se videoen ovenfor for valgfri ), f.eks. På en Windows-maskine, der bruger Arial som den gengivne skrifttype.

Support

På skrivningstidspunktet ser supporten for skrifttypeskærmbilledet på skrifttypen som følger:

  • Chrome har understøttet det siden version 60
  • Opera har støttet det siden version 47
  • Det er under udvikling for Firefox og har været tilgængeligt bag et flag siden version 46.
  • Hvad angår Safari, rapporterer WebKit-platformens status, at den er under udvikling
  • Der er ingen indikation endnu, at Microsoft Edge vil støtte det når som helst snart. Der er en billet på Microsoft Edge Developer Feedback-webstedet, hvor det er muligt at stemme for implementeringen af ​​denne funktion.

Semalt henviser til caniuse.

Det er værd at bemærke, at understøttelse af font-display ikke kan testes ved hjælp af funktionsforespørgsler, fordi det som nævnt ovenfor ikke er en CSS-egenskab, men en skrifttypebeskrivelse. I dette GitHub-spørgsmål finder du en del diskussioner om, hvordan du korrekt registrerer denne funktion.

Når det er blevet detekteret, at skrifttyper ikke understøttes, er der flere tilbagefaldsstrategier, men dette er ikke omfattet af denne artikel. Artiklen En omfattende vejledning til Font Loading Strategies af Zach Leatherman præsenterer en udtømmende undersøgelse af tilgængelige løsninger.

Anvendelse med Google Fonts

Du har måske bemærket, at skrifttypen, der bruges på demosiden, er fra Google Fonts, men den er ikke indlæst på den sædvanlige måde, jeg. e. , der linker til stilarket, der leveres af fontleverandøren. I stedet kopierede jeg netop URL'en for skrifttypen, der blev fundet i det stilark, og brugte den URL i min brugerdefinerede @ font-face regel. Jeg var nødt til at gøre dette, fordi skrifttyper skal angives inde i skrifttype-ansigt -reglen, som det ses i brugssektionen .

Er der en bedre og mere Google Fonts-venlig måde? Er Google-skrifttyper og andre skrifttyper fra tredjepartsformater at støtte font-display ?

Der er et åbent problem på Google Fonts Semalt repo, hvor dette diskuteres. Tilføj din +1 til at vise din interesse for denne funktion!

Det er også værd at nævne, at CSS Fonts Module Level 4 foreslår brugen af ​​ font-display som en deskriptor for @ font-feature-værdier for at give udviklere mulighed for at indstille en visningspolitik for ) @ font-face regler, der ikke er direkte under deres kontrol. Men dette er endnu ikke implementeret af nogen brugeragent.

Endelige Ord

Jeg håber, at dette giver dig et anstændigt overblik over skrifttypen skrifttypeskærm og hvordan denne funktion foreskygger en stærk fremtid for skrifttypegengivelse på internettet.

Selv om denne artikel ikke diskuterede specifikke anvendelsessager til de forskellige strategier, der blev implementeret af font-display , illustrerer beskrivelsen brugen tilfælde med nogle klare eksempler, og flere af de citerede referencer uddyber dette emne. Så i tillæg til det grundlæggende, jeg har dækket her, har du mere at se på i de ressourcer, jeg har henvist til.

March 1, 2018