Používání ems ke změně velikostí písma textu na webové stránce

click fraud protection

Když vytváříte webovou stránku, většina profesionálů doporučuje, abyste velikost písma (a ve skutečnosti všeho) přizpůsobili relativní mírou, jako jsou ems, exs, procenta nebo pixely. Je to proto, že opravdu neznáte všechny různé způsoby, jakými by někdo mohl zobrazit váš obsah. A pokud použijete absolutní měřítko (palce, centimetry, milimetry, body nebo obrázky), může to ovlivnit zobrazení nebo čitelnost stránky v různých zařízeních. A doporučuje W3C že používáte ems pro velikosti.

Ale jak velký je em?

Podle W3C em:

"se rovná vypočítané hodnotě vlastnosti 'font-size' prvku, na který je použit. Výjimkou je situace, kdy se znak „em“ objeví v hodnotě samotné vlastnosti „font-size“, v takovém případě se odkazuje na velikost písma nadřazeného prvku. “

Jinými slovy, ems nemají absolutní velikost. Berou své hodnoty velikosti podle toho, kde jsou. Pro většinu webové designéry, To znamená, že jsou ve webovém prohlížeči, takže písmo vysoké 1EM má přesně stejnou velikost jako výchozí velikost písma pro daný prohlížeč.

instagram viewer

Jak vysoká je ale výchozí velikost? Neexistuje způsob, jak si být 100% jistí, protože zákazníci mohou změnit své výchozí velikost písma ve svých prohlížečích, ale protože to většina lidí nemá, můžete předpokládat, že většina prohlížečů má výchozí velikost písma 16px. Takže většinu času 1em = 16px.

Mysli v pixelech, pro měření používej ems

Jakmile víte, že výchozí velikost písma je 16 pixelů, můžete pomocí ems svým klientům umožnit snadno změnit velikost stránky, ale promyslet si pixelů pro vaše velikosti písma. Řekněme, že máte velikostní strukturu něco takového:

  • Nadpis 1 - 20 pixelů
  • Nadpis 2 - 18 pixelů
  • Nadpis 3 - 16 pixelů
  • Hlavní text - 14px
  • Dílčí text - 12px
  • Poznámky pod čarou - 10px

Takto byste je mohli definovat pomocí pixelů pro měření, ale pak by kdokoli, kdo používá IE 6 a 7, nedokázal dobře změnit velikost vaší stránky. Měli byste tedy převést velikosti na ems a to je jen otázka nějaké matematiky:

  • Nadpis 1 - 1,25 em (16 x 1,25 = 20)
  • Nadpis 2 - 1.125em (16 × 1,125 = 18)
  • Nadpis 3 - 1em (1em = 16px)
  • Hlavní text - 0,875 em (16 x 0,875 = 14)
  • Dílčí text - 0,75EM (16 x 0,75 = 12)
  • Poznámky pod čarou - 0,625em (16 x 0,625 = 10)

Nezapomeňte na dědictví!

Ale to není vše, co tam je. Další věc, kterou si musíte pamatovat, je, že berou na velikost rodiče. Takže pokud máte vnořené prvky s různými velikostmi písma, můžete skončit s fontem mnohem menším nebo větším, než očekáváte.

Můžete mít například šablonu stylů, jako je tato:

Výsledkem by byla písma s rozlišením 14px a 10px pro hlavní text a poznámky pod čarou. Pokud však vložíte poznámku pod čarou do odstavce, můžete skončit s textem, který má 8,75px místo 10px. Vyzkoušejte sami, vložte výše uvedené CSS a následující HTML do dokumentu:

Když tedy používáte ems, musíte si být velmi dobře vědomi velikostí nadřazených objektů, jinak na stránce skončíte s některými prvky opravdu zvláštní velikosti.

instagram story viewer