Siv Ems hloov font ntau thiab tsawg
Thaum koj tab tom tsim ib qhov Web page, feem ntau cov kws tshaj lij pom zoo kom koj cov ntawv loj (thiab qhov tseeb, txhua yam) nrog ib tus txheeb ze xws li ems, exs, feem pua, lossis pixels. Qhov no yog vim koj yeej tsis paub txhua txoj kev sib txawv uas ib tus neeg yuav pom koj cov ntsiab lus. Thiab yog tias koj siv kev ntsuas tsis meej (inches, centimeters, millimeters, points, los yog picas) nws yuav cuam tshuam cov duab los yog kev nyeem tau ntawm nplooj ntawv hauv cov khoom siv sib txawv.
Thiab W3C xav kom koj siv cov ems rau qhov ntau thiab tsawg.
Tab sis Loj npaum li cas yog tus Em?
Raws li tus W3C tus em:
\ "yog sib npaug ntawm qhov nqi ntawm qhov 'font-size' ntawm lub caij uas nws siv. Qhov kos yog thaum 'em' tshwm sim hauv tus nqi ntawm 'font-size' property nws tus kheej, nyob rau hauv rooj plaub uas yog hais txog rau qhov font loj ntawm niam txiv keeb. "
Ua lwm yam lus, ems tsis muaj qhov me me. Lawv ua raws li qhov lawv muaj nuj nqis raws li lawv nyob qhov twg. Rau feem ntau cov Web site designers , qhov no txhais tau hais tias lawv nyob rau hauv ib lub Web browser, yog li lub font siab 1d siab yog raws nraim qhov loj tib yam li qhov default font loj rau qhov browser ntawd.
Tab sis siab li cas yog qhov loj me me? Yog tsis muaj txoj kev los ua 100% tej yam, raws li cov neeg tuaj yeem hloov tau lawv qhov default font loj hauv lawv cov browsers, tab sis txij li feem coob ntawm cov neeg tsis koj yuav xav tias feem ntau cov browsers muaj lub neej ntawd font loj ntawm 16px. Li ntawd feem ntau ntawm cov sij hawm 1em = 16px .
Xav Pixels, Siv Ems rau Kev Ntsuas
Thaum twg koj paub tias qhov default font loj yog 16px, koj tuaj yeem siv cov ems kom koj cov neeg tuaj yeem ua kom yooj yim dua qhov nplooj tab sis xav pixels rau koj qhov ntau thiab tsawg font.
Hais tias koj muaj ib lub qauv qauv zoo li no:
- Headline 1 - 20px
- Headline 2 - 18px
- Tawm thawj 3 - 16px
- Cov ntawv tseem ceeb - 14px
- Sub ntawv - 12px
- Tshooj ntawv - 10px
Koj tuaj yeem txhais lawv li kev siv pixels rau kev ntsuas, tab sis, ces leej twg siv IE 6 thiab 7 tsis tuaj yeem hloov koj cov nplooj ntawv zoo dua. Yog li koj yuav tsum hloov qhov ntau thiab tsawg los rau ems thiab qhov no yog qhov teeb meem ntawm qee cov kev ua lej:
- Tawm thawj 1 - 1.25 teev (16 x 1.25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Headline 3 - 1 th (1am = 16px)
- Cov ntawv tseem ceeb - 0.875em (16 x 0.875 = 14)
- Sub ntawv - 0.75em (16 x 0.75 = 12)
- Tshooj ntawv - 0.625em (16 x 0.625 = 10)
Tsis nco cov qub txeeg qub teg!
Tab sis qhov no tsis yog txhua yam yog ems. Lwm yam uas koj yuav tsum nco ntsoov yog tias lawv ua raws li qhov loj ntawm tus niam txiv. Li ntawd, yog hais tias koj muaj cov ntsiab lus uas muaj qhov sib txawv ntawm qhov sib txawv, koj tuaj yeem mus nrog cov font ntau dua los yog loj tshaj qhov koj xav tau.
Piv txwv, tej zaum koj yuav muaj ib daim ntawv zoo li qhov no:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Qhov no yuav tshwm sim nyob rau hauv fonts uas yog 14px thiab 10px rau cov ntawv nyeem tseem ceeb thiab cov lus taw qhia. Tab sis yog tias koj muab tus ntawv hauv qab hauv ib pawg lus, koj yuav xaus nrog cov ntawv nyeem uas yog 8.75px es tsis yog 10px. Sim ua koj tus kheej, muab qhov saum toj no CSS thiab cov HTML hauv qab no:
No font yog 14px lossis 0.875 ems hauv qhov siab.
Cov ntsiab lus no muaj ib cov lus hauv qab no.
Thaum lub sij hawm no tsuas yog lus taw qhia xwb.
Cov lus ntawv hauv qab no yog ib qho nyuaj rau kev nyeem ntawm 10px, nws yog ze li ntawm 8.75px.
Yog li, thaum koj siv cov ems, koj yuav tsum paub txog qhov ntau ntawm cov niam txiv cov khoom, los yog koj yuav xaus nrog qee qhov sib txawv ntawm qhov txawv ntawm koj nplooj ntawv.