font-sizeVlastnost určuje velikost nebo výšku písma. font-sizeovlivňuje nejen písmo, na které je aplikováno, ale také se používá k výpočtu hodnoty jednotek délky em, rem a ex.
p ( font-size: 20px; )font-sizemůže přijímat klíčová slova, délkové jednotky nebo procenta jako hodnoty. Je důležité si uvědomit, že když je deklarována jako součást fontzkratkové vlastnosti, font-sizeje povinná hodnota. Pokud není zahrnut do zkratky, celý řádek je ignorován.
Hodnoty délky (např. Px, em, rem, ex atd.), Na které jsou použity, font-sizenemohou být záporné.
Absolutní klíčová slova a hodnoty
.element ( font-size: small; )Přijímá následující absolutní hodnoty klíčových slov:
xx-smallx-smallsmallmediumlargex-largexx-large
Tyto absolutní hodnoty jsou mapovány na konkrétní velikosti písma vypočítané prohlížečem. Můžete ale také použít dvě hodnoty klíčových slov, které jsou relativní k velikosti písma nadřazeného prvku.
Mezi další absolutní hodnoty patří mm(milimetry), cm(centimetry), in(palce), pt(body) a pc(picas). Jeden bod se rovná 1/72 palce, zatímco jeden pica se rovná 12 bodům - tyto hodnoty se obvykle používají pro tištěné dokumenty.
Relativní klíčová slova
.element ( font-size: larger; )largersmaller
Například pokud má nadřazený prvek velikost písma small, podřízený prvek s definovanou relativní velikostí largerbude velikost písma rovna mediumpodřízenému prvku.
Procentní hodnoty
.element ( font-size: 110%; )Procentní hodnoty, jako je nastavení velikosti písma 110%, jsou také relativní k velikosti písma nadřazeného prvku, jak je znázorněno v ukázce níže:
Podívejte se na Pen qdbELL od CSS-Tricks (@ css-tricks) na CodePen.
Jednotka em
.element ( font-size: 2em; )Jednotka em je relativní jednotka založená na vypočítané hodnotě velikosti písma nadřazeného prvku. To znamená, že podřízené prvky jsou vždy závislé na svém rodiči, aby nastavily velikost písma. Například:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Ve výše uvedeném příkladu bude mít odstavec velikost písma 16px, protože 1 x 16 = 16px, zatímco nadpis bude 32px, protože 2 x 16 = 32px. Existuje mnoho výhod pro změnu velikosti textu v závislosti na velikosti písma nadřazeného prvku, konkrétně můžeme zabalit prvky do kontejneru a vědět, že všechny děti budou vždy vzájemně relativní:
Podívejte se na pero Zjištění, jak em jednotka funguje pomocí CSS-Tricks (@ css-tricks) na CodePen.
Rem jednotka
V případě rem jednotek však velikost písma závisí na hodnotě kořenového prvku (nebo htmlprvku).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Ve výše uvedeném příkladu je jednotka rem rovna 16px (protože je zděděna od html/ root elementu) a velikost písma pro všechny odstavcové prvky bude tedy vypočítána na 24px (1,5 x 16 = 24). Na rozdíl od jednotek em bude odstavec ignorovat styl všech svých rodičů kromě kořene.
Tuto jednotku podporují následující prohlížeče:
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Funguje | Funguje | Funguje | Funguje | 10+ | Funguje | Funguje |
Ex jednotka
.element ( font-size: 20ex; )Pro ex jednotky by se 1ex rovnal vypočítané výšce malého písmene x kořenového prvku. V příkladu níže je tedy htmlprvek nastaven na 20pxa všechny ostatní velikosti písma jsou určeny výškou x daného písma.
Podívejte se na pero Zjištění, jak ex jednotka funguje pomocí CSS-Tricks (@ css-tricks) na CodePen.
Experimentovat s demo nad mou nahradí font-familyna htmlprvku vidět, jak jiný font-velikosti změny.
Jednotky výřezu
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Jednotky výřezu, například vwa vh, nastavují velikost písma prvku vzhledem k rozměrům výřezu:
- 1vw = 1% šířky výřezu
- 1vh = 1% výšky výřezu
Vezmeme-li tedy následující příklad:
.element ( font-size: 100vh; )Poté se uvede, že velikost písma prvku by měla být vždy 100% výšky výřezu po celou dobu (50vh by bylo 50%, 15vh by bylo 15% atd.). V ukázce níže zkuste změnit velikost příkladu, abyste sledovali roztažení typu:
Podívejte se na typ Pen Sizing s jednotkami vh od CSS-Tricks (@ css-tricks) na CodePen.
vw jednotky se liší v tom, že nastavuje výšku písmen podle šířky výřezu, takže v ukázce níže budete muset vodorovně změnit velikost okna prohlížeče, abyste viděli tyto změny:
Podívejte se na typ Pen Sizing s jednotkami vw od CSS-Tricks (@ css-tricks) na CodePen.
Tyto jednotky podporují následující prohlížeče:
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4,4+ | 7,1+ |
Je důležité si uvědomit, že existují další dvě výřezové jednotky: vmina vmax. První najdete hodnoty vha vwa nastavit font-size jako nejmenší z nich, zatímco vmaxnastaví font-size se největší z těchto dvou hodnot.
Jednotka ch
.element ( font-size: 24ch; )chJednotka je podobná exjednotce v tom, že se nastaví Velikost písma prvku ve vztahu k šířce 0 (nula) glyf z písma:
Podívejte se na typ velikosti pera s ch jednotkami od CSS-Tricks (@ css-tricks) na CodePen.
Tuto jednotku podporuje:
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Funguje | 10+ | Funguje | 9+ | Funguje | Funguje |