Veebilehe loomisel soovitavad enamik spetsialiste fontide (ja tegelikult ka kõige) suuruse määramist suhtelise mõõtmega, näiteks emid, exid, protsendid või pikslid. Seda seetõttu, et te tõesti ei tea kõiki erinevaid viise, kuidas keegi teie sisu võiks vaadata. Ja kui kasutate absoluutset mõõtu (tolli, sentimeetrit, millimeetrit, punkti või picat), võib see mõjutada lehe kuvamist või loetavust erinevates seadmetes. Ja soovitab W3C et kasutate suuruste jaoks ems.
Aga kui suur on em?
Vastavalt W3C em:
"on võrdne elemendi atribuudi" font-size "arvutatud väärtusega, millel seda kasutatakse. Erandiks on see, kui 'em' esineb atribuudi 'font-size' väärtuses, sel juhul viitab see vanemelemendi fondi suurusele. "
Teisisõnu, emidel pole absoluutset suurust. Nad võtavad oma suuruse väärtused vastavalt nende asukohale. Enamikule veebidisainerid, see tähendab, et nad asuvad veebibrauseris, nii et 1em pikkune font on täpselt sama suur kui selle brauseri vaikimisi fondisuurus.
Aga kui pikk on vaikimisi suurus?
Ei saa kuidagi olla 100% kindel, kuna kliendid saavad oma arvamust muuta fondi vaikesuurus nende brauserites, kuid kuna enamik inimesi seda ei tee, võite eeldada, et enamiku brauserite fondi vaikimisi suurus on 16 pikslit. Nii et enamasti 1em = 16px.Mõelge pikslites, mõõtmiseks kasutage em-sid
Kui teate, et fondi vaikemõõt on 16 pikslit, saate ems-i abil lubada oma klientidel lehe suurust lihtsalt muuta, kuid mõelge pikslit teie fondisuuruste jaoks. Oletame, et teil on suuruse struktuur umbes selline:
- 1. pealkiri - 20 pikslit
- 2. pealkiri - 18 pikslit
- Pealkiri 3 - 16 pikslit
- Põhitekst - 14px
- Alamtekst - 12px
- Märkused - 10px
Võite määratleda need nii, kasutades mõõtmiseks piksleid, kuid siis ei saa keegi, kes kasutab IE 6 ja 7, teie lehe suurust hästi muuta. Nii et peaksite teisendama suurused emideks ja see on vaid mõne matemaatika küsimus:
- Pealkiri 1 - 1,25em (16 x 1,25 = 20)
- 2. pealkiri - 1,125em (16 × 1,125 = 18)
- Pealkiri 3 - 1em (1em = 16px)
- Põhitekst - 0,875em (16 x 0,875 = 14)
- Alamtekst - 0,75em (16 x 0,75 = 12)
- Märkused - 0,625em (16 x 0,625 = 10)
Ärge unustage pärimist!
Kuid see pole veel kõik, mis emsil on. Teine asi, mida peate meeles pidama, on see, et nad võtavad vanema suuruse. Nii et kui teil on pesastatud erineva suurusega elemendid, võite lõpuks oodata palju väiksema või suurema fondi.
Näiteks võib teil olla selline stiilileht:
Selle tulemuseks oleks fondid, mis on põhiteksti ja joonealuste märkuste jaoks vastavalt 14px ja 10px. Kuid kui panete joonealuse märkuse lõigu sisse, võite lõpuks saada teksti, mille suurus on 8,75 pikslit, mitte 10 pikslit. Proovige ise, pange ülaltoodud CSS ja järgmine HTML dokumendiks:
Nii et kui kasutate em-sid, peate olema väga teadlik emaobjektide suurustest, vastasel juhul leiate oma lehelt mõne tõesti paaritu suurusega elemendi.