Velikost písma CSS
Velikost písma
Vlastnost font-sizenastavuje velikost textu.
Schopnost spravovat velikost textu je při webdesignu důležitá. Neměli byste však používat úpravy velikosti písma, aby odstavce vypadaly jako nadpisy nebo nadpisy jako odstavce.
Vždy používejte správné značky HTML, například <h1> - <h6> pro nadpisy a <p> pro odstavce.
Hodnota velikosti písma může být absolutní nebo relativní velikost.
Absolutní velikost:
- Nastaví text na zadanou velikost
- Neumožňuje uživateli měnit velikost textu ve všech prohlížečích (špatné z důvodů přístupnosti)
- Absolutní velikost je užitečná, když je známa fyzická velikost výstupu
Relativní velikost:
- Nastavuje velikost vzhledem k okolním prvkům
- Umožňuje uživateli změnit velikost textu v prohlížečích
Poznámka: Pokud neurčíte velikost písma, výchozí velikost normálního textu, jako jsou odstavce, je 16px (16px=1em).
Nastavit velikost písma s pixely
Nastavení velikosti textu pomocí pixelů vám dává plnou kontrolu nad velikostí textu:
Příklad
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tip: Pokud používáte pixely, můžete ke změně velikosti celé stránky použít nástroj lupa.
Nastavte velikost písma pomocí Em
Aby uživatelé mohli změnit velikost textu (v nabídce prohlížeče), mnoho vývojářů používá em místo pixelů.
1em se rovná aktuální velikosti písma. Výchozí velikost textu v prohlížečích je 16 pixelů. Výchozí velikost 1 em je tedy 16 pixelů.
Velikost lze vypočítat z pixelů na em pomocí tohoto vzorce: pixelů /16= em
Příklad
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Ve výše uvedeném příkladu je velikost textu v em stejná jako v předchozím příkladu v pixelech. S velikostí em je však možné upravit velikost textu ve všech prohlížečích.
Bohužel stále přetrvává problém se staršími verzemi Internet Exploreru. Text se zvětší, než by měl, když se zvětší, a menší, než by měl, když se zmenší.
Použijte kombinaci procent a Em
Řešením, které funguje ve všech prohlížečích, je nastavit výchozí velikost písma v procentech pro prvek <body>:
Příklad
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Náš kód nyní funguje skvěle! Zobrazuje stejnou velikost textu ve všech prohlížečích a umožňuje všem prohlížečům přiblížit nebo změnit velikost textu!
Responzivní velikost písma
Velikost textu lze nastavit pomocí vwjednotky, což znamená "šířku výřezu".
Tímto způsobem bude velikost textu odpovídat velikosti okna prohlížeče:
Ahoj světe
Změňte velikost okna prohlížeče, abyste viděli, jak se velikost písma mění.
Příklad
<h1 style="font-size:10vw">Hello World</h1>
Viewport je velikost okna prohlížeče. 1vw = 1 % šířky výřezu. Pokud je výřez široký 50 cm, 1vw je 0,5 cm.