Variabele lettertypen: het enige lettertype dat alles en goed kan veranderen voor de prestaties.

Het web wordt langzaam geladen vanwege veel lettertypen? Klassieke problemen die web doet om tegen te komen

Heb je ooit het gevoel gehad dat de website die we van plan zijn prachtig te ontwerpen? Gebruik een verscheidenheid aan lettertypen om het er dimensionaal uit te laten zien. Het blijkt een "acteur" te zijn, waardoor de website ongelooflijk traag downloadt? We willen zowel vetgedrukte onderwerpen (vet), normale inhoud (normaal) en enkele lichte woorden, maar om dat in de oude dagen te doen. Dit betekent dat we de browser van de gebruiker moeten bestellen om 3 lettertype -bestanden te downloaden (.woff, .woff2, TTF) of meer. Waarin elk bestand zijn eigen grootte voldoende heeft, hoe meer gewicht van veel stijlen, het aantal bestanden dat moet worden geladen, is nog meer vermenigvuldigd. Dit is het "startpunt" van het prestatieprobleem waarmee gebruikers lange tijd kunnen wachten tot het gefrustreerd is. En kan drukken om onze website te sluiten voordat we de schoonheid zien die we hebben voorbereid

‍

Prompt voor illustraties: Website -ontwerpprestaties zitten in de tempels voor de computer. Op het scherm is er een laadsnelheidsgrafiek die in rood stijgt. En er zijn veel lettertype -bestandspictogrammen die het bestand uit het scherm drijft. Vertegenwoordigt het gewicht en de laadlast

Waarom veel stijlen lettertypen gebruiken om het web langzamer te maken?

De belangrijkste oorzaak van dit probleem is heel eenvoudig. Het is de "traditionele lettertype" -architectuur die we al lang bekend zijn in de wereld van statische lettertypen, elke "stijl" of elk "gewicht" wordt opgeslagen in een volledig apart bestand. (700) We moeten 4 verschillende lettertypebestanden downloaden. Stel je voor dat elke keer dat iemand naar onze website gaat. Zijn browser zal 4 keer een verzoek aan de server moeten indienen om die bestanden te downloaden. Hoe meer verzoek en het grotere bestandsgrootte. De tijd die wordt gebruikt om de pagina -laden te downloaden (laadtijd van pagina's) is langer als schaduw. Dit probleem is een van de belangrijkste oorzaken die render-blokkerende bronnen , wat Google Pagespeed Insights niet leuk vindt. En het heeft een negatieve invloed op de prestaties van onze website rechtstreeks

‍

Prompt voor illustraties: eenvoudige infographic vergelijking aan de linkerkant, met "statische lettertypen" met 4 dozen (licht, regelmatig, gemiddeld, vet), naar de rechterbrowser gestuurd. Met een pijl erop wijzend dat het minder tijd kost

Laat de website langzaam zijn vanwege veel lettertypen. Zal meer ernstige gevolgen hebben dan verwacht

De langzame download van de website vanwege een zwaar lettertype -bestand is niet alleen een kleine kwestie waardoor de gebruiker u irriteert. Maar het beïnvloedt de keten van onze zakelijke doelen. Stel je voor: 1. Gebruikerservaring vernietigd: niemand wacht graag. Veel onderzoek toont aan dat slechts 1-3 seconden kunnen worden geladen, het rendement van meer dan 30%kan verhogen. 2. SEO -ranglijst: Paginasnelheid (paginasnelheid) is een van de belangrijke factoren die Google al lang is gerangschikt. Langzame websites worden gezien als lage kwaliteit. En moeilijk om hoog te scoren op de zoekresultaten 3. Conversieratio verlaagd: wanneer de gebruiker wordt gefrustreerd en eerst op de website drukt. De kans voor u om hem in een klant te veranderen. (Of het nu gaat om het kopen, invullen van formulier of het aanvragen van lidmaatschap) is onmiddellijk nul. 4. Verspilling van bronnen door reden: veel bestanden moeten downloaden tegen het tegenovergestelde van het Sustainable Web Design dat zich richt op het creëren van een milieuvriendelijke website en effectief energie gebruikt. Als we dit probleem chronisch laten zien, is het alsof we zowel klanten als zakelijke kansen elke dag gratis verliezen.

‍

Prompt voor illustraties: Dai Gram -afbeelding met negatieve effecten, beginnend bij "langzaam lettertype laden" leidt tot "slechte gebruikerservaring" (willekeurig gezicht), gevolgd door "hoog bouncepercentage" (de pijl stuiterde van de website) en uiteindelijk "lage SEO Rannking & Conversion"

De oplossing is op "variabele lettertypen": het enige lettertype dat alles kan.

En toen gaf de technologie ons de uitweg. Dat is ** variabele lettertypen ** of het lettertype dat kan "veranderen". Het concept is de revolutie van het lettertype. In plaats van afzonderlijke bestanden te hebben voor elk gewicht en alle stijlen. Variabel lettertype bevat alles in ** "één bestand" **! Dit geniale bestand bewaart de belangrijkste kerngegevens van het lettertype. En sta ontwerpers of ontwikkelaars in staat om de waarden "onafhankelijk aan te passen" via de CSS -code. De assen (assen). Gemeenschappelijke aanpassing is:

• Gewicht (wght): de dikte-dunne van de personages continu, van dun tot zwart.
• Breedte (WDTH): kan de breedte aanpassen-de beperktheid van de letters
• Slant (SLNT): Pas de tekst van de letter aan (vergelijkbaar met cursief maar kan de graden aanpassen).
• Optische grootte (OPSZ): Pas de details van de letters aan die aan het display passen in verschillende maten.

De wijziging in variabele lettertypen betekent dat de browser slechts één bestandsletterbestand wil downloaden, wat resulteert in het aantal HTTP -aanvragen en het verminderen van de enorme bestandsgrootte. Dit is een verandering die consistent is met de nieuwste trend van de website -ontwerp die zowel de schoonheid als de hoogste prestaties tegelijkertijd benadrukt

‍

Prompt voor illustraties: mooie graphics die de enige 'A' -letter toont, maar er zijn 4 schuifregelaars: gewicht, breedte, inslag, optische grootte.

Voorbeelden van het echte ding: wanneer de nieuwswebsite overschakelt naar variabele lettertypen

Om duidelijker te zijn, denk dan aan een online nieuwswebsite die vroeger statische lettertypen op hun eerste pagina gebruikte, inclusief de hoofdkop (Black 900), Bold 700), categorie 500 naamnaam (Medium 500) en de nieuwsinhoud (regulier 400), die 4 50KB -lettertypebestanden bevat, waardoor de website vertraging maakt. Vooral op mobiele telefoons die geen sterke internetsignalen zijn, besloot het ontwikkelingsteam opnieuw te starten, een nieuwe website door over te schakelen naar het variabele lettertype van het originele familietype. De bestandsgrootte neemt af tot slechts 120 kb! Het resultaat is: 1. De laadtijd van de pagina afgenomen gedurende bijna 2 seconden: indruk op de gebruiker vanaf het begin. 2. Google PageSpeed Insights in de prestatiesectie van 55 tot 92: SEO duidelijk. 3. Bounce -tarief daalde met 15%: gebruikers op het web langer. Lees meer nieuws en 4. Het ontwerpteam is meer vrijheid: ze kunnen een lettertype-gewicht creëren dat "past" met het ontwerp, zoals het gewicht van 650 (semi-bold). Voor het deel dat niet zo dik wil zijn, is BOLD prominenter dan medium, wat onmogelijk is met statische lettertypen.

‍

Prompt voor illustraties: Vergelijk afbeeldingen van het voor- en na het scherm van het scherm Mobiele telefoon dat de nieuwswebsite aan de linkerkant (eerder) binnenkomt, heeft een pivot load en de pagina met paginaspeed. De juiste score (na) De inhoud toont volledige resultaten en de pagina met paginaspeed heeft een hoge groene score.

Wilt u variabele lettertypen gebruiken? Wat te doen? (Begin onmiddellijk)

Het begin van de variabele lettertypen is niet moeilijk. Vooral voor mensen die al bekend zijn met CSS. Dit is een eenvoudige stap. Dat je meteen kunt volgen:

1. Zoek de juiste variabele lettertypen: de beste startbron zijn Google -lettertypen . Vink gewoon het kanaal "Alleen variabele lettertypen voor variabele lettertypen" aan. U zult veel lettertypen van goede kwaliteit vinden die gratis beschikbaar zijn. Of zal proberen uit andere bronnen die ook betrouwbaar zijn
2. Aankondiging van lettertypen in CSS: gebruik @font-face om het lettertype uit te voeren. Maar in plaats van elk bestand aan te kondigen, zullen we slechts één bestand aankondigen en het asbereik opgeven dat ondersteunt. Bijvoorbeeld: @font-face {
font-family: inter vf ';
Src: url ('inter-variable.wof2') formaat ('woff2-variivests');
Lettertype
: nmal;
}
3. Roep de stijl van vellen in: na de aankondiging kun je hetzelfde gewicht uitvoeren als statische lettertypen zoals lettertype-gewicht: 700; Of zal de kwalificaties gebruiken lettertypevariatie-settings om andere cores specifiek te regelen: h1 {
font-family: 'inter vf', sans-serif;
Lettertype-gewicht: 800; / * Pas de dikte aan * /
}
p {
font-family: inter vf ', sans-serif;
Lettertype-gewicht: 450; boetes * /
lettertype -variatie: '-5; / * enigszins aanpassing * /
}
4. Het plannen van het lettertype: om de beste prestaties te krijgen, zou lettertypelaststrategie moeten bestuderen, zoals het gebruik van lettertype-display: swap; Om het bericht weer te geven met een back -uplettertype in afwachting van het laden van variabele lettertype

Voor extra inzichten wordt het aanbevolen om de variabele lettertypengids van MDN -webdocumenten te lezen, een geweldige bron van ontwikkelaars.

‍

Prompt voor illustraties: Stap-voor-stap 3-staps infigueer: 1. Het vergrotingspictogram kijkt naar het Logo van Google Fonts. Codecode met @font-face en lettertype-variatie-settings . 3.

Vragen die mensen zich meestal afvragen over variabele lettertypen.

Vraag: Het grootste deel van de browser ondersteunt variabele lettertypen?
Antwoord: Ondersteuning! De meest populaire browser van vandaag (Chrome, Firefox, Safari, Edge). Zowel desktop als mobiel ondersteunen al vele jaren variabele lettertypen en stelt u in staat om het met vertrouwen te gebruiken dat de meeste gebruikers (meer dan 95%) zeker uw website zullen zien.

Vraag: Hoe weten we welk lettertype variabel lettertype is?
Antwoord: De gemakkelijkste manier om te observeren is door te kijken naar de lettertypeproviders. Op Google -lettertypen is er een "variabel" teken. Of als het wordt gedownload als een normaal bestand, heeft het variabele lettertype -bestand het woord 'variabele', 'VF' of de naam van de as. In de bestandsnaam en meestal is de bestandsgrootte groter dan een enkel statisch lettertype -bestand omdat het alle informatiestijlen bevat

Vraag: Variabele lettertypen zijn altijd beter dan statische lettertypen?
Antwoord: De meeste "ja", vooral wanneer uw project meer dan 2-3 stijlen wil gebruiken, met behulp van variabel lettertype. Eén bestand geeft een betere prestaties. Maar als uw website heel eenvoudig is en slechts één stijl gebruikt (zoals regelmatig). Het gebruik van een enkel statisch lettertype kan iets kleiner zijn. De selectie van variabel lettertype biedt echter ook een betere flexibiliteit om het ontwerp in de toekomst aan te passen.

Vraag: Het gebruik van variabele lettertypen heeft invloed op het UI/UX -ontwerp?
Antwoord: Impact op een betere manier! Het geeft vrijheid en oplossing bij het vasthouden van prints (typografie) aan de op rollen gebaseerde ontwerper. Maakt het gemakkelijker om alles aan te passen om perfect te zijn als u een UX/UI -ontwerpservice die deze moderne technologie gebruikt om de beste ervaring te creëren. Dit is iets dat experts u kunnen helpen.

‍

Prompt voor illustraties: Q & A -stijlafbeeldingen met vragen (?) En correcte markeringen (✓) met korte antwoorden. Dat is gemakkelijk te begrijpen voor elke vraag, er zijn verschillende browserlogo's (Chrome, Firefox, Safari, Edge) die laten zien dat ze de uitgebreide ondersteuning communiceren.

Samenvatting: Het is tijd om te upgraden naar variabele lettertypen voor snellere en betere websites.

Op dit moment zijn we al afgesproken dat variabele lettertypen niet alleen een nieuw speelgoed voor ontwerpers zijn, maar een "game -change tool" die helpt om het probleem van de website -prestaties rechtstreeks op te lossen. Wijzigingen van veel statische lettertypen downloaden naar variabel lettertype. Is een investering die enorm rendement biedt, zowel wat betreft laadsnelheid, betere gebruikerservaring, hogere SEO -rangorde en vooral onafhankelijkheid in onbeperkte ontwerpen Het is een beslissing die een goed effect heeft op alle partijen. Zowel de webeigenaar, ontwikkelaars, ontwerpers en vooral onze "gebruikers"

Laat de schoonheid van typografie niet worden uitgewisseld met de snelheid die verloren gaat. Probeer uw hart te openen en gebruik de variabele lettertypen om van vandaag op uw project toe te passen. En u zult merken dat het maken van een website die zowel "mooi" en "snel" is, eigenlijk mogelijk is. En gemakkelijker dan je denkt!

‍

Prompt voor illustraties: krachtige grafische afbeeldingen die raketten uitvoeren die in de lucht opstaan, de raket heeft het woord "variabele lettertypen" bijgevoegd en heeft een route door verschillende pictogrammen, zoals het hart (gebruikersliefde), en de SEO -rangorde.

‍