4 pași pentru utilizarea fonturilor variabile

Sep 12, 2025

să

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Credit Imagine: Viitor)

Fonturile variabile permit designerilor de fonturi pentru a defini variațiile de tip în fontul însuși, permițând un fișier de font să acționeze ca mai multe fonturi. Fonturile standard sunt grupate în familiile de fonturi care conțin mai multe fișiere separate de fonturi, fiecare reprezentând un stil diferit, de exemplu o greutate ușoară sau o greutate îndrăzneață. Fonturile variabile conțin toate aceleași informații într-un singur fișier de fonturi.

Folosind sursa Sans Pro ca exemplu, versiunea variabilă a fontului este de aproximativ 394kb și vine într-o mare varietate de greutăți. Dacă am fi folosit aceste greutăți de fonturi în mod individual ca fișiere standard de fonturi, ele sunt, în medie, 234KB fiecare - rezultând o dimensiune a fișierului combinat de aproximativ 1856kb. Desigur, acest calcul presupune că toate greutățile fontului există individual ca un font standard, pe care nu-l fac. (Deși dacă sunteți în căutarea pentru fonturi regulate, verificați postarea noastră pe cele mai bune fonturi gratuite disponibil.)

Dacă eliminăm fonturile care nu există ca un font standard, dimensiunea combinată a fișierului este încă de aproape trei ori mai mică decât dimensiunea fontului variabil și cu stiluri semnificativ mai puține. Chiar dacă ați dorit doar versiunile îndrăznețe și regulate, comune în multe proiecte web, două versiuni ale sursei standard Sans Pro sunt încă mai mari decât un singur font variabil. Ce demonstrează acest lucru este că, cu fonturi variabile, avem potențialul de a face economii masive pe lățimea de bandă fără a compromite desenele și creativitatea noastră.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — O comparație a dimensiunilor fișierelor unei game de greutăți de fonturi între versiunea standard și variabilă a sursei de fonturi Sans Pro (Credit de imagine: Mandy Michael)

Fonturile variabile funcționează prin interpolarea variațiilor principale de-a lungul unei axe, construind în esență noi puncte între ele. Aceasta înseamnă că ați putea stabili greutăți de fonturi la puncte arbitrare de-a lungul axei care prezintă un număr mult mai mare de stiluri și variații. Mai mult, se datorează faptului că fonturile variabile pot fi interpolate că suntem capabili să ne animăm între fiecare variație, permițând o tranziție netedă de la o greutate subțire la o greutate îndrăzneață - ceva ce nu am reușit niciodată să realizăm înainte.

Ceea ce face fonturi variabile chiar mai interesante este că designerii nu se limitează la o singură axă. Fonturile variabile pot conține multe axe diferite reprezentând o serie de stiluri diferite. Acest lucru ar putea include dimensiunea condensată, italică, optică sau alte opțiuni mai creative sau personalizate.

Doriți să plasați fonturile pe un nou site web? Pentru resursele de design web, se îndreaptă spre cele mai bune Builder de site-uri web Roundup și alegerea de sus web hosting Servicii. Sau pentru o upgrade de stocare, verificați aceste Stocare in cloud Opțiuni.

01. Înțelegerea axelor în fonturile variabile

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Privind la interpolarea unui font variabil pe o axă de greutate și lățime dezvăluie gama de personalizare disponibilă (Credit de imagine: Mandy Michael)

Utilizarea fonturilor variabile în CSS este foarte asemănătoare cu modul în care vom folosi în mod normal fonturile pe web: folosind @ Font-fata la regula . Cu toate acestea, trebuie mai întâi să înțelegem diferitele tipuri de axe în interiorul unui font variabil, deoarece aceasta determină proprietățile CSS pe care le folosim.

Există două tipuri de axe într-un font variabil: o axă înregistrată și o axă personalizată. O axă înregistrată se referă la o axă care este suficient de obișnuită încât merită standardizarea. În prezent există cinci axe înregistrate; Greutate, lățime, înclinare, dimensiune italică și optică și acestea sunt adesea mapate la proprietățile CSS existente, cum ar fi greutatea fontului.

Axele personalizate sunt definite de designerii de tip, pot fi orice tip de variație și necesită doar un identificator de patru litere în fișierul font, care poate fi menționat în CSS.

02. Utilizați o axă înregistrată

A range of variable font weights along an axis from light (200) to black (900). — Variațiile de greutate sunt definite pe o axă, de la lumină (200) până la negru (900) (Credit de imagine: Mandy Michael)

Când vine vorba de o axă înregistrată, vrem să ne asigurăm că folosim orice proprietăți CSS asociate, de exemplu, greutate font sau stil de font.

Putem configura fonturile noastre folosind @ Font-fata la regula așa cum am în mod normal; Schimbarea este în modul în care definim variațiile pentru descriptori, cum ar fi greutatea fontului, stilul font-stretch și stilul de font. Anterior am fi stabilit o greutate de 200 și am definit acest lucru ca versiunea luminoasă a fontului, am stabilit apoi un alt bloc de font pentru versiunea îndrăzneață și versiunea obișnuită până când am avut toate greutățile necesare pentru design-ul. Cu fonturi variabile, avem nevoie doar de un singur bloc de font. Deci, în loc să utilizați mai multe instanțe, specificăm o serie de valori care corespund valorilor minime și maxime care sunt definite pe axa fontului.

 @ font-fata {
Font-Family: "Sursa Sans variabilă";
SRC: format URL ("Source-Sans-variabil.woff") ("Woff-variații");
Greutatea fonturilor: 200 700;
}

În acest exemplu, am stabilit o greutate de fonturi de la 200 la 700. Odată ce gama noastră este definită, putem alege orice număr în acest interval ca greutatea noastră de font, de exemplu 658. Important dacă setați gama de greutate a fontului ca 200 la 700 și Apoi încercați să definiți o greutate de 900, chiar dacă fontul are o greutate de 900 definită în axa sa, nu veți putea să o utilizați. Gama definește ceea ce aveți acces în CSS.

03. Configurați axele personalizate

Deoarece nu vor exista proprietăți CSS preexistente atunci când se utilizează o axă personalizată, trebuie să folosim o nouă proprietate CSS numită setări de font-variație. Acest lucru ne va permite să definim cât mai multe axe numite și personalizate ca avem nevoie.

 H1 {
Font-Family: "fontul meu variabil";
Font-variație-setări: "WGHT" 375, "INLI" 88;
}

În exemplul aici, WGHT se referă la axa înregistrată de greutate și INLI se referă la o axă personalizată numită Inline, fiecare cu o valoare asociată numărului corespunzătoare unui punct de-a lungul axei de variație. În timp ce vă puteți referi la o axă înregistrată ca valoare pentru setările de variație a fontului, este recomandat să utilizați în schimb proprietățile CSS mapate.

Pentru a asigura suportul în browserele mai vechi, putem folosi fonturile de rezervă pentru browserele neacceptate prin utilizarea detectării caracteristicilor CSS.

 H1 {
  Font-Family: "Sursa Sans", Sans-Seif;
  Greutate font: 700;
}

@supports (font-variație-setări: normal) {
H1 {
 Font-Family: "Decovar";
 Font-variație-setări: "inli" 88;
 }
}

Prin verificarea suportului de setări de variație a fontului, putem include stilurile variabile de font în interiorul blocului CSS suport, asigurând că acestea vor fi utilizate numai în browserele care pot accepta fonturi variabile - cu fonturile noastre standard utilizate în browserele neacceptate.

04. Combinați fonturile JavaScript și variabile

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Fonturile variabile permit tranziții netede de la, de exemplu, o greutate subțire la o greutate îndrăzneață; Acest lucru vă permite să creați transformări netede care utilizează variabilele JavaScript (Credit de imagine: Mandy Michael)

Putem folosi evenimente JavaScript pentru situații în care dorim un control mai fin sau de a schimba fontul pe baza evenimentelor pe care nu le putem accesa numai cu CSS. Un exemplu simplu ar potrivi greutatea fontului nostru la dimensiunea ferestrei noastre de vizualizare - deoarece fereastra de vizualizare devine mai mică, greutatea fontului devine mai grea.

Pentru a crea scala fluidului, trebuie să aliniem două seturi de valori și unități - greutatea fontului și dimensiunea portbagajului. Putem accesa lățimea de vizualizare curentă utilizând fereastra.Innerwidth și creați o nouă scală procentuală prin conversia acestuia într-un interval de 0-0.99. Prin includerea dimensiunilor minime și maxime de vizualizare, putem controla intervalul efect.

 Var ViewportScale =
(fereastră.innerwidth - MinWindowsize) / (Maxwindowsize - MinWindowsize);

Apoi, determinăm greutatea fontului pe baza dimensiunii noastre de vizualizare.

 VAR Fontweightscle = ViewportScAle * (Minfontweight - MaxFontweight) + MaxFontweight;

Utilizând proprietățile personalizate CSS, putem folosi valoarea noastră JavaScript pentru a actualiza greutatea fontului în CSS.

 p.style.setproperty ("greutate", fontweightscale);

Când acesta este combinat într-o funcție și atașat la ascultătorul evenimentului de redimensionare, putem actualiza greutatea fontului pe baza noii dimensiuni a ferestrei.

Cu această abordare de bază, suntem capabili să ne modificăm tipografia pe baza tuturor evenimentelor și experiențelor. În cazul în care vizualul este larg, putem avea mai multe detalii; În schimb, atunci când este mai mic și într-un spațiu mai închis, s-ar putea să ne uităm la reducerea lățimii fontului sau să creștem greutatea, oferind un control mai bun al conținutului și al tipografiei noastre în ceea ce privește lizibilitatea, utilitatea și designul.

Poti Vizualizați codul Pentru aceasta pe codePen.

Acest articol a fost publicat inițial în numărul 318 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Abonați-vă la net aici .

Descoperiți mai multe despre fonturile variabile la generarea CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Credit de imagine: Getty / Bianca Berning / Viitor)

În discuția despre Generate CSS, conferința CSS concentrată pentru designerii web care are loc la 26 septembrie 2019 la Rich Mix, Londra, Bianca Berning va explora modul în care fonturile variabile pot crea noi oportunități pentru cuvântul scris în mediul tradițional, precum și noi, imersive experiențe, cum ar fi AR, VR și realitatea mixtă.

Dacă doriți să prindeți acest lucru și alte discuții minunate, merită să vă loviți acum biletele. Dacă vă apucați mai înainte de 5PM UTC pe data de 15 august, puteți economisi 50 de lire sterline, plătind doar doar TVA de 199 £. Cumpărați biletul acum Fotografiile!

Articole similare:

3 moduri de tehnologie schimbă tipul
Începeți cu fonturile variabile în CSS
Transformați tipul dvs. online cu fonturi variabile

4 pași pentru utilizarea fonturilor variabile

01. Înțelegerea axelor în fonturile variabile

02. Utilizați o axă înregistrată

03. Configurați axele personalizate

04. Combinați fonturile JavaScript și variabile

Descoperiți mai multe despre fonturile variabile la generarea CSS

să - Cele mai populare articole

Creați un efect de fundal paralax controlat de șoarece

Creați efecte de colaj în browser cu CSS

Creați un efect de text neon strălucitor

Creați texturi fantomatice cu tehnici mixte

Îmbunătățiți-vă textul în substanța de designer de substanțe

Cum se face explozii masive cu V-ray

Învățați să executați designul și sprinturile de conținut

Cum se creează un geofilter Snapchat în Photoshop

Categorii