Velikost písma CSS

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

Co je to "velikost písma"?

Existuje názor, že velikost znamená velikost největšího znaku uvedeného písma. To není. Ve skutečnosti je hodnota vložena do písma a je nepravděpodobné, že by ji bylo možné měřit ručně pomocí pravítka. Velikost je obvykle o něco větší než vzdálenost od horní části největšího písmena k dolní části nejmenšího písmena. To se děje tak, aby se vešla do libovolné kombinace znaků v daném prostoru. Dále je důležité specifikovat parametr "line-height", jinak mohou písmena p, q a podobně překračovat.

Pixelů

Nejběžnější možnost. Instalováno následovně:

velikost písma: 16px;

Výhoda pixelů je pouze jedna - bez obtíží s hodnotou. Nic, co počítat. Jaká velikost je určena, a to jsou znaky na obrazovce. Nevýhodou je potíže s citlivou velikostí písma CSS. Nebude možné stanovit poměry mezi různými velikostmi.

Počet "pixelů" lze přiřadit zastaralým jednotkám. Jedná se o PC, cm, mm a pt. Takže mm je milimetr, cm je centimetr. Pt a pc - typografie a typografický vrchol. Proč jsou tyto metody zastaralé? Protože nebyli "nezávislí" - prohlížeč automaticky přepočítá hodnoty v pixelech. Proto byly problémy stejné jako u px. Mimochodem, jeden cm od pohledu prohlížeče obsahuje 38 pixelů.

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

Je to jednoduché. Předpokládejme, že máte div, pro který je velikost písma nastavena na 16 pixelů. Obsahuje další div, pro který je velikost písma CSS nastavena na hodnotu 2em. Podle toho bude 1em 16px (tj. Velikost písma nadřazeného prvku) a 2em bude dvakrát větší, tj. 32px.

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

Pro profesionály: ex a ch

Prakticky nejsou používány běžnými designéry a vývojáři frontend. Ex je hodnota symbolu "X" a ch je symbol "0". Nesmí být ve vybraném písmu takové znaky, ale parametry mohou být stále použity. Není známo pro určité případy, pro které jsou takové rozměry nejvhodnější. Zkuste experimentovat - možná to bude pro vás pohodlnější? Pamatujte však na to, že ex a ch jsou "podmíněné" jednotky, takže jemné ladění parametrů bude obtížné.

Zájem: nejvíce matoucí možnost

Jak nastavit velikost písma v CSS jako procento? Zdá se, že vše je jednoduché - stačí zadat požadovaný parametr a dát za ním symbol "%". Ale přichází tu důležitá otázka: "Jaká bude procenta dané velikosti?"

Ve většině případů se parametr vypočítává v závislosti na velikosti rodiče, 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é experimentování. Buďte opatrní s touto měrnou jednotkou, protože můžete snadno změnit vzhled vašeho sázení.

Rem: jednoduchá a všestranná jednotka

Výše uvedené jsou mnoho způsobů, jak přizpůsobit velikost písma v CSS, ale žádný z nich není opravdu vhodný. Pro zjednodušení práce byl vynalezen parametr rem, který je vypočítán v závislosti na hodnotě určené pro značku html.

Je to jednodušší, než se zdá na první pohled. Například pro značku html, ve které je celý obsah stránky zabalen, nastavíte velikost písma CSS 16px. V souladu s tím bude 1rem nyní 16 pixelů. 2rem je 32 pixelů atd. Veškeré proporce lze použít: 0.2rem, 1.1rem, 100rem ... Prohlížeč pečlivě přepočítá parametry.

V html se nemůžete dotýkat vůbec, protože samotné prohlížeče nastavují určitou velikost písma pro obal. Pro důkladnější úpravy je však lepší definovat indikátor. Hlavní výhodou rem je, že můžete snadno měnit písma na určitém místě bez ovlivnění jiných prvků. Pamatujte však, že starší prohlížeče (IE pod verzí 9) nepodporují tento indikátor.

Vw a vh: exotické možnosti

Nejnovější jednotky měření vytvořené pro mobilní zařízení. Vw je 1% šířky okna, na které uživatel prohlíží váš web. Vh - 1% její výšky. Velikost znaků se bude automaticky měnit v závislosti na obrazovce zařízení návštěvníka. Chcete-li během rozvržení zvolit vhodnou velikost, zvýšte a zmenšte velikost obrazovky.

Shrnutí

Dlouho bylo možné nastavit velikost písma CSS pouze v px. Je mnohem pohodlnější používat rem, vh a vw (zejména s citlivým designem), stejně jako em. Každá z těchto možností má své výhody a nevýhody, proto zkontrolujte před použitím několik metod. Moderní weboví designéři často používají 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 2 pravidla:

• pokud vlastnosti musí být zmenšeny vzhledem k velikosti písma, em je nejlepší volbou;
• v ostatních případech se doporučuje rem.

Em se často používá k nastavení výplní a velikosti okrajů. Buďte opatrní, pokud v něm určíte velikost znaků pro seznamy, protože vzhledem k velkému vnoření mohou být znaky nečitelné.