Variable skrifttyper: Den eneste skrifttype, der kan ændre alt og godt til ydeevne.

Webet indlæses langsomt på grund af en masse skrifttyper? Klassiske problemer, som web gør for at støde på

Har du nogensinde følt, at det websted, som vi agter at designe smukt? Brug en række skrifttyper for at få det til at se dimensionelt ud. Det viser sig at være en "skuespiller", der får webstedet til at downloade utroligt langsomt? Vi ønsker både dristige emner (fed), normalt indhold (almindelige) og nogle lette ord, men at gøre det i de gamle dage. Hvilket betyder, at vi er nødt til at bestille brugerens browser til at downloade 3 fontfiler (.woff, .woff2, TTF) eller mere. I hvilken hver fil har sin egen størrelse nok, jo mere vægt af mange stilarter, antallet af filer, der skal indlæses, er endnu mere ganget. Dette er "udgangspunkt" for præstationsproblemet, der giver brugerne mulighed for at vente i lang tid, indtil de er frustrerede. Og kan presse for at lukke vores websted, før vi ser den skønhed, vi har forberedt

‍

Spørgsmål om illustrationer: Webstedsdesignpræstationer sidder i templerne foran computeren. På skærmen er der en indlæsningshastighedsgraf, der stiger i rødt. Og der er mange fontfilikoner, som filen flyder ud af skærmen. Repræsenterer vægten og belastningsbyrden

Hvorfor bruge mange stilarter af skrifttyper til at gøre weben langsommere?

Den vigtigste årsag til dette problem er meget ligetil. Det er den "traditionelle skrifttype" -arkitektur, som vi har været bekendt med i lang tid i verden af statiske skrifttyper, hver "stil" eller hver "vægt" vil blive gemt i en helt separat fil. (700) Vi er nødt til at downloade 4 forskellige fontfiler. Forestil dig, at hver gang nogen går til vores hjemmeside. Hans browser bliver nødt til at indsende en anmodning til serveren 4 gange om at downloade disse filer. Jo mere anmodning og den større filstørrelse. Den tid, der bruges til at downloade sidebelastningen (sidebelastningstid), vil være længere som en skygge. Dette problem er en af de vigtigste årsager, der forårsager render-blokerende ressourcer , hvilket er, hvad Google PageSpeed-indsigt ikke kan lide. Og det påvirker vores websteds ydeevne negativt

‍

Spørg for illustrationer: Enkel infografisk sammenligning til venstre, der viser "statiske skrifttyper" med 4 kasser (lys, almindelig, mellemstor, fed), sendt til højre browser. Med en pil, der påpeger, at det tager mindre tid

Lad webstedet langsomt på grund af en masse skrifttyper. Vil have mere alvorlige konsekvenser end forventet

Den langsomme download af hjemmesiden på grund af en tung fontfil, det er ikke kun en lille sag, der får brugeren til at irritere dig. Men det påvirker kæden af vores forretningsmæssige mål. Forestil dig: 1. Brugeroplevelse ødelagt: Ingen kan lide at vente. Mange undersøgelser viser, at kun 1-3 sekunder kan indlæses, kan øge afkasthastigheden på mere end 30%. 2. SEO Ranking: Sidehastighed (sidehastighed) er en af de vigtige faktorer, som Google er blevet rangeret i lang tid. Langsomme websteder ses som lav kvalitet. Og vanskeligt at rangere højt på søgeresultaterne 3. konverteringsfrekvens reduceret: Når brugeren først er frustreret og trykker først på webstedet. Muligheden for dig at ændre ham til en kunde. (Uanset om det køber, udfylder formularen eller ansøger om medlemskab), bliver det straks nul. 4. affald af ressourcer efter grund: At skulle downloade en masse filer til det modsatte af det bæredygtige webdesignkoncept , der fokuserer på at skabe et miljøvenligt og energi web. At lade dette problem kronisk Det er som om vi mister både kunder og forretningsmuligheder gratis hver dag.

‍

Spørgsmål om illustrationer: Dai Gram -billede, der viser negative effekter, startende fra "langsom skrifttypebelastning" fører til "dårlig brugeroplevelse" (tilfældigt ansigt), efterfulgt af "høj afvisningshastighed" (pilen sprang ud af hjemmesiden) og til sidst "Low Seo Rannking & Conversion"

Løsningen er på "Variable skrifttyper": den eneste skrifttype, der kan gøre alt.

Og så gav teknologien os vejen ud. Det er ** Variable skrifttyper ** eller den skrifttype, der kan "ændre sig". Dets koncept er fontens revolution. I stedet for at have separate filer for hver vægt og alle stilarter. Variabel skrifttype inkluderer alt i ** "en fil" **! Denne geni -fil vil holde skrifttypens vigtigste kernedata. Og give designere eller udviklere mulighed for at "justere værdier" uafhængigt gennem CSS -koden. Akserne (akser). Almindelig justering er:

• Vægt (WGHT): Tykkelsens tynde af karaktererne kontinuerligt, fra tynd til sort.
• Bredde (WDTH): Kan justere bredden-den smalle bogstaver
• Slant (SLNT): Juster teksten til brevet (svarende til kursiv, men kan justere graderne).
• Optisk størrelse (OPSZ): Juster detaljerne om bogstaverne, der passer til skærmen i forskellige størrelser.

Ændringen til variable skrifttyper betyder, at browseren kun ønsker at downloade en fil font -fil, hvilket resulterer i antallet af HTTP -anmodninger og reducerer den enorme filstørrelse. Dette er en ændring, der er i overensstemmelse med den nyeste tendens til webstedsdesign , der understreger både skønheden og den højeste præstation på samme tid

‍

Spørg om illustrationer: Smuk grafik, der viser det eneste 'A' bogstav, men der er 4 skyderkontroller: vægt, bredde, skrå, optisk størrelse.

Eksempler fra den rigtige ting: Når nyhedswebstedet skifter til variable skrifttyper

For at være klarere tænk på et online nyhedswebsted, der plejede at bruge statiske skrifttyper på deres første side, inklusive hovedoverskriften (Black 900), BOLD 700), kategori 500 -navn (Medium 500) og nyhedsindholdet (almindelig 400), der inkluderer 4 50 kb fontfiler, hvilket gør webstedet til at bremse. Især på mobiltelefoner, der ikke er stærke internetsignaler, besluttede udviklingsteamet at relancere, et nyt websted ved at skifte til den variable skrifttype af den originale familiefont. Filstørrelsen falder til kun 120 kb! Resultatet er: 1. Sidebelastningstid faldt i næsten 2 sekunder: imponere brugeren fra starten. 2. Google PageSpeed Insights i præstationsafsnittet fra 55 til 92: SEO tydeligt. 3. Bounce Rate faldt 15%: Brugere på nettet længere. Læs flere nyheder og 4. designteamet er mere frihed: De kan skabe en skriftvægt, der "passer" med designet, såsom vægten på 650 (semi-bold). For den del, der ikke ønsker at være så tyk, er fed, mere fremtrædende end medium, hvilket er umuligt med statiske skrifttyper.

‍

Spørg om illustrationer: Sammenlign billeder af før & efter skærm på mobiltelefonskærmen, der kommer ind på nyhedswebstedet til venstre (før), har en drejebelastning og sidespidets graf. Den rigtige score (efter) indholdet viser komplette resultater, og PageSpeed -grafen har en høj grøn score.

Vil du bruge variable skrifttyper? Hvad skal jeg gøre? (Start med det samme)

Begyndelsen på de variable skrifttyper er ikke vanskelig. Især for mennesker, der allerede er bekendt med CSS. Dette er et simpelt skridt. At du kan følge med det samme:

1. Find de rigtige variable skrifttyper: Den bedste kilde til start er Google -skrifttyper . Bare marker kanalen "Vis kun variabel skrifttyper". Du finder mange skrifttyper af god kvalitet, der er tilgængelige gratis. Eller vil prøve fra andre kilder, der også er pålidelige
2. Meddelelse om skrifttyper i CSS: Brug @font-face til at køre skrifttypen. Men i stedet for at annoncere hver fil vil vi kun annoncere en fil og specificere det akseområde, der understøtter. For eksempel: @font-face {
font-familie: inter vf ';
SRC: URL ('Inter-variabel.wof2') format ('Woff2-Varivests');
vægt
: nmal;
}
3. Ring i stil med ark: Efter meddelelsen kan du køre den samme vægt som statiske skrifttyper såsom font-vægt: 700; Eller vil bruge kvalifikationerne font-variation-opførelser til at kontrollere andre kerner specifikke: H1 {
font-familie: 'Inter VF', sans-serif;
Fontvægt: 800; / * Juster tykkelsen * /
}
p {
font-familie: inter vf ', sans-serif;
Font-vægt: 450; bøder * /
font -variation: '-5; / * let justering * /
}
4. Planlægning af skrifttypebelastningen: For at få den bedste ydelse skal der studere skriftbelastningsstrategi, f.eks. Brug af font-display: swap; For at få meddelelsen til visning med en backup -skrifttype, mens du venter på indlæsning af variabel skrifttype

For yderligere indsigt anbefales det at læse Variable Fonts Guide fra MDN Web Docs, som er en god kilde til udviklere.

‍

Spørgsmål om illustrationer: Trin-for-trin 3-trins infigue: 1. Forstørrelsesikonet ser på Google Fonts-logoet. Kodekode med @font-face og font-variation-opførelser . 3.

Spørgsmål, som folk har en tendens til at undre sig over variable skrifttyper.

Spørgsmål: De fleste af browseren understøtter variable skrifttyper?
Svar: Support! Den mest populære browser i dag (Chrome, Firefox, Safari, Edge). Både desktop og mobil har støttet variable skrifttyper i mange år og giver dig mulighed for at bruge det med tillid til, at de fleste brugere (mere end 95%) helt sikkert vil se dit websted.

Spørgsmål: Hvordan ved vi, hvilken skrifttype der er variabel skrifttype?
Svar: Den nemmeste måde at observere er at se på fontudbydere. På Google -skrifttyper vil der være et "variabelt" tegn. Eller hvis den downloades som en normal fil, vil den variable fontfil have ordet 'variabel', 'VF' eller navnet på aksen. I filnavnet og normalt er filstørrelsen større end en enkelt statisk fontfil, fordi den indeholder alle oplysninger

Spørgsmål: Variable skrifttyper er altid bedre end statiske skrifttyper?
Svar: De fleste "ja", især når dit projekt ønsker at bruge mere end 2-3 stilarter ved hjælp af variabel skrifttype. En fil giver en bedre ydelse. Men hvis dit websted er meget let og bruger kun en stil (f.eks. Regelmæssig). Brug af en enkelt statisk skrifttype kan være lidt mindre. Valget af variabel skrifttype giver imidlertid også bedre fleksibilitet til at justere designet i fremtiden.

Spørgsmål: Brug af variable skrifttyper påvirker UI/UX -designet?
Svar: Virkning på en bedre måde! Det giver frihed og opløsning ved tilbageholdelse af tryk (typografi) til den rollebaserede designer. Gør det lettere at justere alt for at være perfekt, hvis du har brug for en UX/UI -designtjeneste , der bruger denne moderne teknologi til at skabe den bedste oplevelse. Dette er noget, som eksperter kan hjælpe dig.

‍

Spørg om illustrationer: Spørgsmål og svar billeder med spørgsmål (?) Og korrekte mærker (✓) med korte svar. Det er let at forstå for hvert spørgsmål, der er forskellige browserlogoer (Chrome, Firefox, Safari, Edge), der viser for at kommunikere den omfattende støtte.

Resumé: Det er tid til at opgradere til variable skrifttyper til hurtigere og bedre websteder.

På dette tidspunkt er vi allerede enige om, at variable skrifttyper ikke kun er et nyt legetøj for designere, men et "spilændringsværktøj", der hjælper med at løse problemet med webstedsydelse direkte. Ændringer fra mange statiske skrifttyper downloads til variabel skrifttype. Er en investering, der giver enorme afkast både med hensyn til belastningshastighed, bedre brugeroplevelse, højere SEO -placering og vigtigst af alt, uafhængighed i ubegrænset design er det en beslutning, der har en god effekt på alle parter. Både websejer, udviklere, designere og især vores "brugere"

Lad ikke typografiens skønhed udveksles med den hastighed, der går tabt længere. Prøv at åbne dit hjerte og bruge de variable skrifttyper til at ansøge om dit projekt fra i dag. Og du vil opdage, at det faktisk er muligt at oprette et websted, der er både "smukt" og "hurtigt". Og lettere end du tror!

‍

Spørgsmål om illustrationer: Kraftige grafik, der udfører raketter, der stiger op i himlen, som raketten har ordet "variable skrifttyper" knyttet og har en rute gennem forskellige ikoner, såsom hjertet (brugerkærlighed) og SEO -rangeringen.

‍