Kai kuriate tinklalapį, dauguma specialistų rekomenduoja šriftus (o iš tikrųjų ir viską) dydį nustatyti santykinai, pvz., Emus, ex, procentus ar pikselius. Taip yra todėl, kad jūs tikrai nežinote visų skirtingų būdų, kaip kas nors gali peržiūrėti jūsų turinį. Ir jei naudosite absoliutų matą (coliais, centimetrais, milimetrais, taškais ar picomis), tai gali turėti įtakos puslapio rodymui ar skaitomumui skirtinguose įrenginiuose. Ir rekomenduoja W3C kad dydžiams naudojate EMS.
Bet kiek jų yra?
Pagal W3C em:
"yra lygi elemento, kuriam jis naudojamas, savybės" font-size "apskaičiuotai vertei. Išimtis yra tada, kai „em“ atsiranda pačioje „font-size“ savybės vertėje, tokiu atveju ji nurodo pirminio elemento šrifto dydį. "
Kitaip tariant, ems neturi absoliutaus dydžio. Jie priima savo dydžio vertes pagal tai, kur jie yra. Daugumai interneto dizaineriai, tai reiškia, kad jie yra žiniatinklio naršyklėje, taigi 1em aukščio šriftas yra lygiai tokio pat dydžio kaip ir numatytasis tos naršyklės šrifto dydis.
Bet koks aukštis yra numatytasis dydis? Negalite būti tikri 100%, nes klientai gali pakeisti savo nuomonę numatytasis šrifto dydis savo naršyklėse, bet kadangi dauguma žmonių to nedaro, galite manyti, kad daugumos naršyklių numatytasis šrifto dydis yra 16 taškų. Taigi dažniausiai 1em = 16 taškų.
Galvokite pikseliais, matui naudokite emus
Kai žinosite, kad numatytasis šrifto dydis yra 16 taškų, tada galite naudoti „EMS“, kad klientai galėtų lengvai keisti puslapio dydį, bet pagalvokite pikselių jūsų šriftų dydžiams. Tarkime, kad turite dydžių struktūrą maždaug taip:
- 1 antraštė - 20 taškų
- 2 antraštė - 18 taškų
- 3 antraštė - 16 taškų
- Pagrindinis tekstas - 14 taškų
- Antrinis tekstas - 12 taškų
- Išnašos - 10 taškų
Galite juos taip apibrėžti, naudodami taškus matavimui, bet tada visi, naudojantys IE 6 ir 7, negalės gerai pakeisti jūsų puslapio dydžio. Taigi turėtumėte konvertuoti dydžius į emus 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)
- Antrinis 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. Kitas dalykas, kurį turite atsiminti, yra tai, kad jie įgyja tėvų dydį. Taigi, jei turite įdėtų elementų su skirtingais šriftų dydžiais, galite gauti daug mažesnį ar didesnį šriftą, nei tikitės.
Pavyzdžiui, galite turėti tokį stiliaus lapą:
Tai sukeltų pagrindinio teksto ir išnašų atitinkamai 14 ir 10 taškų šriftus. Bet jei pastraipoje įdėsite išnašą, galų gale tekstas būtų 8,75, o ne 10 taškų. Išbandykite patys, įdėkite aukščiau CSS ir šį HTML į dokumentą:
Taigi, kai naudojate emus, turite gerai žinoti pagrindinių objektų dydžius, kitaip jūsų puslapyje atsiras tikrai nelyginių elementų.