Jednotky pro měření velikosti písma CSS

Existuje mnoho způsobů, jak přizpůsobit velikost písma CSS. Významná část zpracovatelů stále používá pixely, ale to není úplně ten správný přístup. Pixel je velmi jednoduchá volba, která není vždy vhodná pro přizpůsobení rozvržení stránky. Zvažte všechny existující metody pro změnu velikosti písma CSS.

Jaká je tato "velikost písma" obecně?

Předpokládá se, že velikost odkazuje na hodnotu největšího znaku uvedeného písma. To není pravda. Hodnota je ve skutečnosti vložena do písma a měřit ji ručně, s pravítkem, je nepravděpodobné. Typicky je velikost mírně větší než vzdálenost od horní části velkého písmena k dolní části nejmenší. To je provedeno tak, aby umožňovalo libovolnou kombinaci znaků v daném prostoru. Dále je důležité zadat parametr "line-height", jinak mohou písmena p, q a podobně překračovat meze.

Pixely

Nejběžnější verze. Instaluje se takto: velikost písma: 16px; Výhoda pixelů je jen jedna věc - žádná obtíž s velikostí. Nic, co počítat. Jakou velikost je uvedena, budou znaky na obrazovce. Nevýhodou je potíže s adaptivní velikostí písma CSS. Nebude možné vytvořit vztah mezi různými velikostmi. Mezi "pixel" lze přičíst zastaralé jednotky měření. Jedná se o počítače, cm, mm a pt. Ano, mm je milimetr, cm je centimetr. Pt a pc - typografický bod a typografický vrchol. Proč jsou tyto metody zastaralé? Protože nebyli "nezávislí" - prohlížečAutomatické počítání hodnot v pixelech. Proto byly problémy stejné jako v případě px. Mimochodem, jeden cm od pohledu prohlížeče obsahuje 38 pixelů.

Em: hodnota závisí na velikosti písma nadřazeného prvku

Vše je jednoduché. Předpokládejme například, že máte div, pro který je zadán 16px písma. Je zde další div, pro který je velikost písma CSS nastavena na 2em. Proto 1em - to bude 16px (tj. Velikost písma nadřazeného prvku) a 2em - dvakrát, to znamená 32px.

Můžete také nastavit hodnotu em v nadřazeném prvku. V tomto případě bude záviset na velikosti základny uvedené v těle nebo html. Em je relativní velikost písma CSS, která se zvýší a zmenší spolu s velikostí znaků nadřazeného prvku. To je výhodné - změnit velikost na velkém počtu míst, stačí změnit parametry rodičů.

Pro profesionály: ex a ch

Prakticky nepoužívají běžní pracovníci a vývojáři frontend. Ex je hodnota znaku "X" a ch je znak "0". Zvolené písmo nemusí mít takové znaky, ale možnosti mohou být stále použity. Určitě není známo, v jakých případech jsou takové rozměry nejvhodnější. Zkuste experimentovat - možná to bude lepší pro vás? Pamatujte však na to, že ex a ch jsou "podmíněné" jednotky, takže jemné přizpůsobení parametrů bude obtížné.

Procento: Nejvíce nehmotná volba

Jak nastavit velikost písma v CSS jako procento? Zdá se, že vše je jednoduché - stačí zadat požadovanou volbu a po ní umístit symbol "%". Ale tady to jenastává důležitá otázka: "Jaké procento velikosti bude dáno?"
Ve většině případů se parametr vypočítává v závislosti na velikosti rodičů, ale ne vždy. Pokud nastavíte vlastnost levého okraje, bude procentní podíl vypočítán v závislosti na šířce nadřazeného bloku. Pokud nastavíte výšku řádku, procento bude provedeno v závislosti na aktuální velikosti písma. Nastavení parametrů v procentech vyžaduje pečlivé experimenty. Buďte opatrní s tímto zařízením, protože může snadno změnit vzhled vašeho uspořádání.

Rem: Jednoduchá a univerzální jednotka

Nahoru je seznam mnoha způsobů, jak přizpůsobit velikost písma v CSS, ale žádný z nich není vhodný. Pro zjednodušení práce byl vypočten parametr rem, který se vypočítá v závislosti na velikosti značky určené pro html. To je jednodušší, než se zdá na první pohled. Například pro html tag, který zabalil celý obsah stránky, nastavíte jej ve velikosti písma CSS 16px. V souladu s tím bude 1rem nyní 16 pixelů. 2rem je 32 pixelů apod. Můžete použít libovolný poměr stran: 02 rem, 11 rem, 100rem Prohlížeč přesně zobrazí parametry.

V html se nemůžete dotýkat vůbec, protože samotné prohlížeče nastavují určitou velikost písma pro obal. Ale pro pečlivější nastavení je nejlepší nově definovat skóre. Hlavní výhodou rem je, že můžete snadno měnit písma na určité místo bez ovlivnění jiných prvků. Nezapomeňte však, že starší IE prohlížeče pod verzí 9) nepodporují tuto metriku.

Vw a vh: exotické parametry

Poslední jednotkyměření provedená pro mobilní zařízení. Vw je 1% šířky okna, ve které uživatel zobrazuje váš web. Vh - 1% její výšky. Hodnoty znaků budou automaticky měněny v závislosti na obrazovce návštěvníka. Chcete-li zvolit vhodnou velikost při rozvržení, zvětšete a zmenšte velikost obrazovky.

Pojďme si shrnout

Je dlouhou dobu, odkud nemůžete nastavit velikost písem CSS jen přes px. Je mnohem pohodlnější používat rem, vh a vw (zejména pro adaptivní design), stejně jako em. Každá z těchto možností má své výhody a nevýhody, proto zkontrolujte několik metod před použitím. Moderní zpracovatelé se často uchýlí k rem, protože to je jeden z nejjednodušších způsobů, jak změnit velikost písma. Má však nevýhodu - součásti jsou méně modulární.
Doporučuje se dodržovat dvě pravidla:
  • Pokud mají být vlastnosti měněny podle velikosti písma, bude preferovanou volbou em;
  • V ostatních případech se doporučuje použít rem.
  • Em se často používá k nastavení výplně a velikosti okrajů. Buďte opatrní, pokud v ní určíte hodnotu znaků pro seznamy, protože kvůli velkému krytu mohou být zkreslené znaky.

    Související publikace