Paggamit ng Ems upang baguhin ang laki ng font
Kapag nagtatayo ka ng isang Web page, ang karamihan sa mga propesyonal ay inirerekomenda na ang laki ng mga font (at sa katunayan, lahat ng bagay) na may isang kamag-anak na sukat tulad ng em, ex, porsyento, o pixel. Ito ay dahil hindi mo talaga alam ang lahat ng iba't ibang paraan na maaaring makita ng isang tao sa iyong nilalaman. At kung gumamit ka ng isang ganap na panukala (pulgada, sentimetro, milimetro, mga punto, o mga picas) maaari itong makaapekto sa display o pagiging madaling mabasa ng pahina sa iba't ibang mga aparato.
At inirerekomenda ng W3C na gumamit ka ng ems para sa mga laki.
Ngunit gaano ang Big ay isang Em?
Ayon sa W3C isang em:
ay katumbas ng computed value ng 'font-size' na ari-arian ng elemento kung saan ito ay ginagamit. Ang pagbubukod ay kapag 'em' ay nangyayari sa halaga ng 'font-size' na ari-arian mismo, kung saan ito ay tumutukoy sa laki ng font ng elemento ng magulang. "
Sa ibang salita, ang mga em ay walang ganap na sukat. Kinukuha nila ang kanilang mga sukat sa laki batay sa kung nasaan sila. Para sa karamihan sa mga taga-disenyo ng Web , nangangahulugan ito na sila ay nasa isang Web browser, kaya ang isang font na 1em taas ay eksakto ang parehong laki ng default na laki ng font para sa browser na iyon.
Ngunit gaano kataas ang laki ng default? Walang paraan upang maging 100% tiyak, tulad ng mga customer ay maaaring baguhin ang kanilang default na laki ng font sa kanilang mga browser, ngunit dahil sa karamihan sa mga tao ay hindi maaari mong ipalagay na ang karamihan sa mga browser ay may default na laki ng font ng 16px. Kaya halos lahat ng oras 1em = 16px .
Mag-isip sa Pixels, Gumamit ng Ems para sa Panukala
Sa sandaling malaman mo na ang default na laki ng font ay 16px, maaari mo nang gamitin ang ems upang pahintulutan ang iyong mga kliyente na baguhin ang laki ng pahina madali ngunit mag-isip sa mga pixel para sa iyong mga laki ng font.
Sabihing mayroon kang isang sizing na istraktura ng ganito:
- Headline 1 - 20px
- Headline 2 - 18px
- Headline 3 - 16px
- Pangunahing teksto - 14px
- Sub teksto - 12px
- Mga talababa - 10px
Maaari mong tukuyin ang mga ito na paraan ng paggamit ng mga pixel para sa pagsukat, ngunit pagkatapos ay sinuman gamit ang IE 6 at 7 ay hindi magagawang baguhin ang laki ng iyong pahina na rin. Kaya dapat mong i-convert ang mga laki sa ems at ito ay lamang ng isang bagay ng ilang matematika:
- Headline 1 - 1.25em (16 x 1.25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Headline 3 - 1em (1em = 16px)
- Pangunahing teksto - 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)
Huwag Kalimutan ang Mana!
Ngunit iyan ay hindi lahat ay may ems. Ang iba pang bagay na dapat mong tandaan ay ang pagkuha ng laki ng magulang. Kaya kung mayroon kang nested mga elemento na may iba't ibang laki ng font, maaari kang magtapos ng isang font na mas maliit o mas malaki kaysa sa iyong inaasahan.
Halimbawa, maaari kang magkaroon ng style sheet na katulad nito:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Ito ay magreresulta sa mga font na 14px at 10px para sa pangunahing teksto at footnotes ayon sa pagkakabanggit. Ngunit kung maglagay ka ng footnote sa loob ng isang talata, maaari kang magtapos ng teksto na 8.75px sa halip na 10px. Subukan ito sa iyong sarili, ilagay ito sa itaas na CSS at ang sumusunod na HTML sa isang dokumento:
Ang font na ito ay 14px o 0.875 em sa taas.
Ang talata na ito ay may talababa dito.
Habang ito ay isang footnote parapo.
Ang teksto ng footnote ay mahirap basahin sa 10px, halos hindi ito mabasa sa 8.75px.
Kaya, kapag gumagamit ka ng em, kailangan mong maging napaka-kamalayan ng mga laki ng mga bagay ng magulang, o makakapunta ka sa ilang mga talagang kakaibang sized na elemento sa iyong pahina.