Dimensiunea fontului în css em, px, pt sau procent

Utilizarea atributului font-size pentru a scala textul este unul dintre cele mai dificile aspecte ale designului de stil în CSS. CSS oferă patru unități pentru măsurarea dimensiunii textului afișat într-un browser web. Care dintre aceste patru unități este cea mai potrivită pentru documentele web? Această întrebare a provocat numeroase discuții și dispute. Este dificil să răspundă fără echivoc la o astfel de întrebare.

Să ne cunoaștem unitățile

Em (em): em este o unitate scalabilă care este utilizată pentru documente web. Un em este egal cu dimensiunea curentă a fontului. De exemplu, dacă dimensiunea fontului documentului este de 12pt. apoi 1em este egal cu 12pt. Deoarece em este scalată, 2em este egală cu 24pt. 5em este egal cu 6pt, etc. Datorită scalabilității și compatibilității ridicate cu dispozitivele mobile, em este din ce în ce mai folosită în documentele web.

Pixeli (pixeli): Pixelii sunt unități de dimensiune fixă ​​care sunt utilizate pentru tot ce se citește pe ecranul calculatorului. Un pixel este egal cu un punct de pe ecranul calculatorului (aceasta este cea mai mică diviziune a rezoluției ecranului dvs.). Mulți designeri web folosesc pixeli în documentele web, astfel încât atunci când sunt vizualizate într-un browser, site-ul arată perfect în termeni de pixeli. Singura problema este ca pixelii nu pot fi crescuti pentru comoditatea cititorilor cu vedere slaba sau reduse pentru a fi usor de citit pe dispozitivele mobile.

Puncte (pt): Punctele sunt folosite în mod tradițional în publicațiile tipărite (adică pentru tot ce este tipărit pe hârtie). Un punct este de 1/72 de centimetru. Punctele sunt foarte asemănătoare cu pixelii prin faptul că au o dimensiune fixă ​​și nu pot fi mărite / micșorate.

Care este diferența?

Diferența dintre aceste unități este ușor de înțeles pe exemple specifice. Iată cum se raportează unul la altul: 1em = 12pt = 16px = 100%. Să vedem ce se întâmplă atunci când mărim dimensiunea fontului de bază (folosind corpul selectorului CSS) de la 100% la 120%.

După cum puteți vedea, Em și Procent se măresc pe măsură ce mărimea fontului crește, iar pixelii și punctele nu. Este ușor de utilizat dimensiunea absolută pentru textul dvs., dar este mult mai ușor să utilizați text scalabil afișat pe orice dispozitiv. Prin urmare, pentru textul documentului web, este preferabil să folosiți unitățile Em și Procentul.

EM sau Procent?

Am aflat că Point și Pixel nu sunt cele mai bune unități pentru documentele web. Deci, avem Em și Procent. Teoretic, Em și Procent sunt aceleași unități, dar în practică există mici diferențe între ele, care nu pot fi ignorate.

În exemplul de mai sus, am folosit unitatea procentuală ca mărimea fontului de bază (pentru eticheta corporală). Dacă schimbați dimensiunea fontului de bază de la Percent la Em (adică corp ), atunci probabil că nu veți observa diferența. Să vedem ce se întâmplă când dimensiunea fontului pentru organism este 1em. și când clientul modifică setarea "Dimensiune text" în browser (această setare este disponibilă în unele browsere, de exemplu, în Internet Explorer).

Când dimensiunea textului din browser-ul client este setată la "mediu", nu există nicio diferență între Em și Procent. Dar dacă schimbați această setare, diferența devine destul de vizibilă. Atunci când configurați "Cel mai mic" Em sunt mult mai mici decât procentul. Iar atunci când ai creat "Largest", contrariul este adevărat - Em este mult mai mare decât Procentul. Putem spune că unitățile EM sunt scalate, așa cum ar trebui să fie, dar în practică acest text este scalat prea brusc, iar pe unele dispozitive cel mai mic text devine necitit.

În teorie, Em este noul standard pentru dimensiunile fonturilor de documente web, dar în practică se pare că unitatea Percent este mai ușor de utilizat. Când se modifică setările clientului, textul pentru care este folosit unitatea Percent se calculează corect, permițând designerilor să păstreze lizibilitatea, disponibilitatea și designul vizual.

Câștigător: procentaj (%).

De obicei, când creez un nou design, pentru elementul de corp folosesc procente (corp ), apoi utilizați em pentru scalarea ulterioară. În timp ce în setările pentru corp este folosit procentul procentual, puteți utiliza fie Procentaj, fie Em pentru orice alte reguli și selectori CSS, în timp ce totuși vă bucurați de avantajele utilizării procentului ca dimensiune principală a fontului.

În ultimii ani, această practică a devenit foarte frecventă în designul web.
Pixelii sunt acum folosite ca un unități de dimensiune font acceptabile (citește text mic, utilizatorii pot folosi „zoom“ browser). Cu toate acestea, utilizarea de pixeli este problematică, deoarece dispozitivele mobile cu ecrane cu o densitate foarte mare de pixeli (unele dispozitiv Android iPhone și au o densitate de 200-300 pixeli per inch, din cauza fonturile sunt 11 pixeli și 12 sunt slab distinse). Deci, eu continui să folosesc Procent ca mărimea fontului principal pentru documentele web.

Trimiteți-le prietenilor: