Naudodamiesi "Ems" pakeisti šrifto dydžius
Kai kuriate tinklalapį, dauguma profesionalų rekomenduoja, kad dydžio šriftus (ir iš tikrųjų viską) naudotų santykinė priemonė, pvz., Ems, exs, procentais arba pikseliais. Taip yra todėl, kad tikrai nežinote visų skirtingų būdų, kaip kažkas galėtų peržiūrėti jūsų turinį. O jei naudojate absoliučią priemonę (colių, centimetrų, milimetrų, taškų arba picų), tai gali turėti įtakos skirtingų įrenginių ekranui ar skaitomumui.
W3C rekomenduoja naudoti "ems" dydžius.
Bet kiek Big yra Em?
Pasak W3C, jie:
"yra lygus apskaičiuotam elemento" font-size "reikšmiui, kuriame jis naudojamas, vertę. Išimtis yra tada, kai" em "įvyksta paties" font-size "nuosavybės vertėje, tokiu atveju ji nurodo į tėvų elemento šrifto dydį. "
Kitaip tariant, ems neturi absoliučio dydžio. Jie atsižvelgia į jų dydžio vertes pagal tai, kur jie yra. Daugumai interneto dizainerių tai reiškia, kad jie yra žiniatinklio naršyklėje, todėl šriftas, kuris yra 1em aukštas, yra tokio paties dydžio kaip numatytasis tos naršyklės šrifto dydis.
Bet kaip ilgis yra numatytasis dydis? Nėra jokio būdo būti 100% tikri, nes vartotojai gali keisti numatytąjį šrifto dydį savo naršyklėse, tačiau kadangi dauguma žmonių nežino, kad dauguma naršyklių turi numatytą šrifto dydį 16 pikselių. Taigi didžiąją dalį laiko 1em = 16px .
Pagalvokite apie pikselius, naudokite "Ems" priemonę
Kai žinote, kad numatytasis šrifto dydis yra 16 pikselių, tuomet galite naudoti ems, kad jūsų klientai galėtų lengvai keisti puslapio dydį, bet pagalvokite apie taškų šrifto dydžius.
Pasakykite, kad jūsų dydžio struktūra yra tokia:
- 1 antraštė - 20 piks
- Antraštė 2 - 18 piks
- 3 antraštė - 16 piks
- Pagrindinis tekstas - 14 pikselių
- Panašus tekstas - 12 pikselių
- Išnašos - 10 piks
Galite juos apibrėžti tokiu būdu, naudodami pikselius matavimui, bet tada, kai naudosite IE 6 ir 7, negalėsite tinkamai keisti puslapio dydžio. Taigi, jūs turite konvertuoti dydžius į ems, ir tai tik kai kurių matematikos klausimas:
- 1 antraštė - 1.25em (16 x 1.25 = 20)
- 2 antraštė - 1.125em (16 × 1.125 = 18)
- 3 antraštė - 1em (1em = 16px)
- Pagrindinis tekstas - 0.875em (16 x 0.875 = 14)
- Panašus tekstas - 0.75em (16 x 0.75 = 12)
- Išnašos - 0.625em (16 x 0.625 = 10)
Nepamirškite paveldėjimo!
Bet tai dar ne viskas, ko reikia ems. Kitas dalykas, kurį reikia atsiminti, yra tai, kad jie imasi tėvų dydžio. Taigi, jei turite įdėtus elementus su skirtingais šrifto dydžiais, galėtumėte baigti šriftą, kuris yra daug mažesnis arba didesnis, nei tikitės.
Pavyzdžiui, galite turėti tokį stilių lentelę:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Dėl šios priežasties šriftus bus atitinkamai 14 pikseliai ir 10 pikseliai pagrindiniam tekstui ir išnašoms. Bet jei dalį pastraipoje įrašėte išnašą, galėtumėte baigti tekstą, kuris yra 8,75px, o ne 10px. Išbandykite patys, įdėsite šį CSS ir šį HTML dokumentą:
Šis šriftas yra 14 pikselių arba 0.875 ems aukščio.
Šiame punkte pateikiama išnaša.
Nors tai tik išnašos pastraipa.
Išnašos tekstas sunku perskaityti 10 piks., Jis beveik neįskaitomas esant 8,75 piks.
Taigi, kai naudojate "ems", turite gerai suvokti tėvų objektų dydžius arba savo puslapio pabaigoje turėsite tam tikrų nelyginių elementų.