Ngagunakeun suweng pikeun ngarobah ukuran font
Lamun anjeun nuju ngawangun hiji kaca web, paling professional nyarankeun nu ukuran fon (jeung kanyataanna, sagalana) ku ukuran relatif kayaning suweng, exs, percentages, atawa piksel. Ieu sabab bener teu nyaho sagala cara nu béda nu batur bisa nempo eusi Anjeun. Tur upami Anjeun salah make hiji ukuran absolut (inci, sentimeter, milimeter, titik, atanapi picas) eta bisa mangaruhan tampilan atawa readability kaca dina beda jeung nu sejen.
Jeung W3C ngajak nu make suweng pikeun ukuran.
Tapi Kumaha Big mangrupa EM?
Nurutkeun kana W3C hiji em:
"Sarua jeung nilai itunganna tina 'font-ukuran' milik unsur on nu biasa digunakeun. Iwal ieu lamun 'em' lumangsung dina nilai tina 'font-ukuran' milik sorangan, nu hal eta ngarujuk mun ukuran font tina unsur indungna ".
Dina basa sejen, suweng teu boga hiji ukuran absolut. Éta nyandak kana nilai ukuran maranéhanana dumasar kana tempat aranjeunna. Kanggo sabagéan ageung désainer Web , ieu ngandung harti yén aranjeunna dina browser Web, jadi hiji font nu aya 1em jangkung persis ukuran sarua sakumaha ukuran font standar pikeun browser éta.
Tapi kumaha jangkung mangrupa ukuran standar? Aya jalan janten 100% tangtu, sakumaha konsumén bisa ngarobah ukuran font standar maranéhanana di panyungsi maranéhanana, tapi saprak paling urang teu bisa nganggap yén paling panyungsi boga ukuran font standar tina 16px. Jadi paling ti waktos 1em = 16px.
Pikir di piksel, Paké suweng pikeun Ukur éta
Sakali anjeun terang yen ukuran font standar téh 16px, Anjeun teras bisa make suweng pikeun ngidinan klien anjeun pikeun ngatur ukuran kaca gampang tapi pikir di piksel pikeun ukuran font Anjeun.
Ucapkeun anjeun gaduh hal sizing struktur kawas kieu:
- Headline 1 - 20px
- Headline 2 - 18px
- Headline 3 - 16px
- téks Utama - 14px
- Sub téks - 12px
- Footnotes - 10px
Anjeun bisa nangtukeun aranjeunna jalan nu maké piksel keur ngukurna, tapi lajeng saha maké IE 6 jeung 7 moal bakal bisa ngatur ukuran halaman Anjeun ogé. Jadi Anjeun kudu ngarobah éta ukuran pikeun suweng jeung ieu téh ngan hitungan sababaraha math:
- Headline 1 - 1.25em (16 x 1,25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Headline 3 - 1em (1em = 16px)
- téks Utama - 0.875em (16 x 0.875 = 14)
- Sub téks - 0.75em (16 x 0.75 = 12)
- Footnotes - 0.625em (16 x 0.625 = 10)
Ulah Poho Pewarisan!
Tapi éta teu kabéh aya kana suweng. Hal sejenna nu peryogi diinget nyaeta aranjeunna nyandak kana ukuran indungna. Ku kituna lamun geus nested elemen kalayan ukuran font béda, Anjeun bisa ngeureunkeun nepi sareng font leuwih leutik atawa leuwih badag batan nu nyangka.
Contona, Anjeun bisa boga lambar gaya kawas kieu:
p {font-ukuran: 0.875em; }
.footnote {font-ukuran: 0.625em; }
Ieu bakal ngahasilkeun fon anu 14px na 10px pikeun téks utama jeung footnotes mungguh. Tapi lamun nyimpen footnote a jero ayat hiji, Anjeun bisa ngeureunkeun nepi ka téks nu mangrupa 8.75px tinimbang 10px. Coba eta diri, nempatkeun ieu CSS luhur jeung HTML handap kana dokumen anu:
Font Ieu 14px atawa 0,875 suweng dina jangkungna.
Ayat ieu mangrupa footnote di jerona.
Bari ieu ngan hiji ayat footnote.
The footnote téks téh teuas maca dina 10px, éta méh illegible di 8.75px.
Ku kituna, nalika nu nuju maké suweng, Anjeun kudu jadi pisan sadar tina ukuran tina objék indung, atawa anjeun gé mungkas nepi ka sababaraha elemen ukuran bener aneh dina kaca anjeun.