Fonturi CSS. Setarea dimensiunii fontului cu Em. Folosirea unei combinații de procente și Em.
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
Pentru a permite utilizatorilor să redimensioneze textul (în meniul browserului), mulți dezvoltatori folosesc em în loc de pixeli.
Unitatea de dimensiuni em este recomandată de W3C.
1em este egal cu dimensiunea curentă a fontului. Dimensiunea implicită a textului în browsere este 16px. Deci, dimensiunea implicită de 1em este 16px.
Mărimea poate fi calculată de la pixeli la em folosind această formulă: pixeli / 16 = em.
Exemplu:
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
În exemplul de mai sus, dimensiunea textului în em este aceeași cu exemplul precedent în pixeli. Cu toate acestea, cu dimensiunea em, este posibil să ajustați dimensiunea textului în toate browserele.Din păcate, există încă o problemă cu versiunile mai vechi de IE. Textul devine mai mare decât ar trebui atunci când este făcut mai mare și mai mic decât ar trebui când este făcut mai mic.
Folosiți o combinație de procente și Em
Soluția care funcționează în toate browserele este să setați o dimensiune de font implicită în procent pentru elementul <body>:
Exemplu:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Codul de mai sus arată aceeași dimensiune a textului în toate browserele și permite tuturor browserelor să mărească sau să redimensioneze textul!