Folosind Ems pentru a schimba dimensiunile fontului
Când construiți o pagină Web, majoritatea profesioniștilor vă recomandă să dimensionați fonturile (și, de fapt, totul) cu o măsură relativă, cum ar fi ems, exs, procente sau pixeli. Acest lucru se datorează faptului că într-adevăr nu cunoașteți toate modurile diferite în care cineva vă poate vedea conținutul. Și dacă utilizați o măsură absolută (inci, centimetri, milimetri, puncte sau picas), aceasta poate afecta afișarea sau lizibilitatea paginii pe diferite dispozitive.
Și W3C vă recomandă să utilizați ems pentru dimensiuni.
Dar cât de mare este Em?
Potrivit W3C, un em:
"este egal cu valoarea calculată a proprietății" font-size "a elementului pe care este folosit. Excepția este atunci când 'em' apare în valoarea proprietății font-size propriu-zisa, caz în care se referă la dimensiunea fontului elementului părinte. "
Cu alte cuvinte, ems nu au o dimensiune absolută. Ei își iau valorile de mărime în funcție de locul în care se află. Pentru majoritatea designerilor web , aceasta înseamnă că se află într-un browser Web, deci un font cu înălțimea de 1 e este exact la fel ca dimensiunea implicită a fontului pentru acel browser.
Dar cât de înalt este dimensiunea implicită? Nu există nici o modalitate de a fi 100% sigură, deoarece clienții își pot schimba dimensiunea fontului implicit în browserele lor, dar din moment ce majoritatea oamenilor nu puteți presupune că majoritatea browserelor au o dimensiune implicită a fontului de 16 pixeli. Deci, de cele mai multe ori 1em = 16px .
Gândiți-vă în pixeli, Utilizați Ems pentru măsură
După ce știți că dimensiunea implicită a fontului este de 16 pixeli, puteți utiliza ems pentru a permite clienților dvs. să redimensioneze pagina cu ușurință, dar gândiți-vă în pixeli pentru dimensiunile fontului.
Spuneți că aveți o structură de dimensiuni asemănătoare:
- Titlul 1 - 20 pixeli
- Titlul 2 - 18 pixeli
- Headline 3 - 16px
- Textul principal - 14 pixeli
- Subtext - 12px
- Note de subsol - 10px
S-ar putea să le definiți în acest mod folosind pixeli pentru măsurare, dar atunci cineva care utilizează IE 6 și 7 nu ar putea să redimensioneze pagina dvs. bine. Deci, ar trebui să convertiți dimensiunile în ems și aceasta este doar o chestiune de matematică:
- Titlul 1 - 1.25em (16 x 1.25 = 20)
- Titlul 2 - 1.125em (16 × 1.125 = 18)
- Titlul 3 - 1em (1em = 16px)
- Textul principal - 0.875 (16 x 0.875 = 14)
- Sub text - 0,75 semne (16 x 0,75 = 12)
- Note de subsol - 0,625 (16 x 0,625 = 10)
Nu uita moștenirea!
Dar nu e tot ce e la ems. Celălalt lucru pe care trebuie să-l amintiți este că aceștia iau mărimea părintelui. Deci, dacă aveți elemente imbricate cu dimensiuni diferite de caractere, puteți ajunge la un font mult mai mic sau mai mare decât vă așteptați.
De exemplu, este posibil să aveți o foaie de stil în felul următor:
p {font-size: 0.875cm; }
.footnote {font-size: 0.625em; }
Acest lucru ar duce la fonturi care sunt 14px și 10px pentru textul principal și notele de subsol, respectiv. Dar dacă introduceți o notă de subsol în interiorul unui paragraf, puteți ajunge la un text care este de 8,75 pixeli și nu de 10 pixeli. Încercați-vă singur, puneți acest CSS de mai sus și următorul cod HTML într-un document:
Acest font are înălțime de 14px sau 0.875 ems.
Acest alineat are o notă de subsol în acesta.
Deși acest lucru este doar un paragraf din nota de subsol.
Textul din nota de subsol este greu de citit la 10px, este aproape ilizibil la 8,75px.
Deci, atunci când utilizați ems, trebuie să fiți foarte conștienți de dimensiunile obiectelor părinte sau veți termina cu unele elemente de dimensiuni foarte ciudate pe pagina dvs.