Gamit ang Ems sa pag-usab sa gidak-on sa font
Kon nagtukod ka og Web page, ang kadaghanan sa mga propesyonal nagrekomendar nga ang mga gidak-on nga mga font (ug sa pagkatinuod, ang tanan) nga may sukod sama sa ems, exs, percentages, o pixels. Kini tungod kay ikaw wala gayud mahibalo sa tanang nagkalainlain nga mga paagi nga ang usa ka tawo mahimo nga motan-aw sa imong sulod. Ug kon ikaw mogamit sa hingpit nga sukod (pulgada, sentimetro, milimetro, mga punto, o mga panid) mahimo kini makaapekto sa pagpasundayag o mabasa sa pahina sa lainlaing mga himan.
Ug ang W3C nagsugyot nga mogamit ka og em sa gidak-on.
Apan unsa ka dako ang Em?
Sumala sa W3C usa ka em:
"katumbas sa gikalkula nga bili sa 'ang gidak-on sa gidak-on' nga kabtangan sa elemento nga gigamit niini. Ang eksepsiyon mao ang kung ang 'em' mahitabo sa bili sa 'gidak-on sa gidak-on' nga kabtangan mismo, diin kini nagpasabut ngadto sa gidak-on sa font sa ginikanan nga elemento. "
Sa laing pagkasulti, ang mga em nga walay hingpit nga gidak-on. Gihimo nila ang ilang mga sukdanan nga gibase base sa kung asa sila. Alang sa kadaghanan sa mga tigdisenyo sa Web , kini nagpasabot nga anaa sila sa usa ka Web browser, busa ang usa ka font nga 1em taas parehas ang gidak-on sama sa default nga laki sa font alang niana nga browser.
Apan unsa ka taas ang sukdanan sa default? Walay paagi nga mahimo nga 100% sigurado, tungod kay ang mga kustomer makausab sa ilang default nga gidak-on sa font sa ilang mga browser, apan tungod kay kadaghanan sa mga tawo dili nimo mahunahuna nga kadaghanan sa mga browser adunay default font size nga 16px. Busa kadaghanan sa panahon 1em = 16px .
Hunahunaa ang mga Pixels, Gamita ang Ems alang sa Sukaranan
Sa higayon nga imong nahibal-an nga ang default nga font nga gidak-on mao ang 16px, mahimo nimo gamiton ang em aron tugutan ang imong mga kliyente nga usbon ang pahina sa dali apan hunahunaa ang mga pixel alang sa imong mga gidak-on sa font.
Pag-ingon nga adunay usa ka sizing usa ka butang nga sama niini:
- Headline 1 - 20px
- Pangulo 2 - 18px
- Pangulo 3 - 16px
- Main nga teksto - 14px
- Sub teksto - 12px
- Mga footnote - 10px
Mahimo nimong ipasabut kanila kana nga paagi sa paggamit sa mga pixel alang sa pagsukod, apan unya ang bisan kinsa nga naggamit sa IE 6 ug 7 dili makausab pag-ayo sa imong panid. Busa kinahanglan nimo nga kinabig ang mga gidak-on sa em ug kini usa ka butang lamang sa pipila ka matematika:
- Headline 1 - 1.25em (16 x 1.25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Pangulo 3 - 1em (1em = 16px)
- Main text - 0.875em (16 x 0.875 = 14)
- Sub text - 0.75em (16 x 0.75 = 12)
- Mga footnote - 0.625em (16 x 0.625 = 10)
Ayaw Kalimti ang Panulondon!
Apan dili lang kana ang tanan. Ang laing butang nga kinahanglan nimong hinumduman mao nga sila magkuha sa gidak-on sa ginikanan. Busa kung nested nimo ang mga elemento nga adunay lainlaing mga gidak-on sa font, mahimo ka nga adunay usa ka font nga mas gamay o mas dako kay sa imong gipaabut.
Pananglitan, tingali adunay estilo nga sama niini:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Kini moresulta sa mga font nga 14px ug 10px alang sa nag-unang teksto ug mga footnotes. Apan kon imong ibutang ang usa ka footnote sulod sa usa ka parapo, mahimo ka nga adunay teksto nga 8.75px kay sa 10px. Sulayi kini, ibutang kini sa ibabaw sa CSS ug ang mosunod nga HTML ngadto sa usa ka dokumento:
Kini nga letra maoy 14px o 0.875 em sa gitas-on.
Kini nga parapo adunay usa ka footnote sa niini.
Samtang kini usa lamang ka footnote paragraph.
Ang footnote text lisud mabasa sa 10px, kini halos dili mabasa sa 8.75px.
Busa, sa diha nga ikaw nagagamit sa mga ems, kinahanglan nimo nga mahibal-an ang mga gidak-on sa mga ginikanan nga mga butang, o imong mahuman ang pipila ka talagsaon nga mga elemento sa imong pahina.