Dimensiunea fontului în css em, pixeli, puncte și procente

Unul dintre cele mai complexe momente din CSS este folosirea proprietății dimensiunii fontului pentru a scala textul. În CSS, aveți patru unități de măsură de bază, cu ajutorul cărora puteți ajusta dimensiunea textului. Care dintre cele patru unități este cea mai bună pentru web? Această întrebare a dat naștere unui întreg baraj de argumente și argumente. În cele din urmă, este extrem de dificil să răspundem la această întrebare, deoarece întrebarea însăși nu este simplă.







Introducere în unitățile CSS

Deci, care sunt diferențele?

Diferența dintre unități este ușor de înțeles prin exemple. În general, 1em = 12pt = 16px = 100%. Dar ce se întâmplă dacă mărim dimensiunea fontului de bază, de exemplu, în eticheta corporală, setați font-size: 120%.

După cum puteți vedea mai sus, cu creșterea mărimii fontului de bază, fontul în em și procent a crescut, de asemenea, dar fontul bazat pe pixeli și elemente nu a crescut. Desigur, puteți seta cu ușurință dimensiunea absolută pentru textul dvs., dar pentru vizitatori va fi mai bine dacă utilizați un text scalabil care va fi afișat în mod adecvat pe orice dispozitiv. Din acest motiv, em și procentul sunt preferabile pentru web.







Em vs. interes

Am aflat că unitățile și punctele de pixeli nu sunt cea mai bună soluție pentru web, așa că am rămas cu procente și em. În teorie, ambele em și pixel sunt identice, dar în practică, ele au câteva diferențe mici care trebuie luate în considerare.

De exemplu, din exemplul de mai sus, folosim procente pentru dimensiunea fontului de bază (eticheta corporală). Dacă schimbați unitatea de bază a fontului principal (procentual) în em (adică corpul ), probabil că nu veți simți diferența. Să vedem ce se întâmplă atunci când eticheta corporală are o dimensiune a fontului de 1em. iar utilizatorul a hotărât să modifice dimensiunea fontului - opțiunea "Text Size" în setările browserului (acest lucru este posibil pe unele browsere, de exemplu, IE).

Când dimensiunea textului este setată la "mediu" în browser, nu veți observa diferența dintre em și procent. Cu toate acestea, dacă schimbați setările, diferența devine vizibilă. De exemplu, cu "cel mai mic", em este substanțial mai mică decât procentul și când "cel mai mare" este opusul, em devine mai mult procent. Deși mulți pot susține că este scalat după cum este necesar, în practică se cântăresc prea mult și cu o mică cantitate devine ilizibil pe unele ecrane.

În teorie, unitățile em și procentul reprezintă standardul optim pentru web, însă, în practică, procentele sunt mai ușor de utilizat. Când utilizatorul modifică setările de text din browser, procentele sunt scalate mai inteligent în browser, permițând designerilor să păstreze lizibilitatea, accesibilitatea și designul vizual.







Trimiteți-le prietenilor: