font-sizeVlastnosť určuje veľkosť alebo výšku písma. font-sizeovplyvňuje nielen písmo, na ktoré je aplikovaný, ale používa sa aj na výpočet hodnoty jednotiek dĺžky em, rem a ex.
p ( font-size: 20px; )font-sizemôže prijať kľúčové slová, dĺžkové jednotky alebo percentá ako hodnoty. Je však dôležité poznamenať, že ak je deklarovaná ako súčasť fontmajetku skratky, font-sizeje povinnou hodnotou. Ak nie je zahrnutý v skratke, celý riadok sa ignoruje.
Hodnoty dĺžky (napr. Px, em, rem, ex, atď.), Ktoré sa použijú na, font-sizenemôžu byť záporné.
Absolútne kľúčové slová a hodnoty
.element ( font-size: small; )Prijíma nasledujúce absolútne hodnoty kľúčových slov:
xx-smallx-smallsmallmediumlargex-largexx-large
Tieto absolútne hodnoty sú mapované na konkrétne veľkosti písma vypočítané prehliadačom. Môžete však tiež použiť dve hodnoty kľúčového slova, ktoré sú relatívne k veľkosti písma nadradeného prvku.
Ostatné absolútne hodnoty zahŕňajú mm(milimetre), cm(centimetre), in(palce), pt(body) a pc(picas). Jeden bod sa rovná 1/72 palca, zatiaľ čo jedna fotografia sa rovná 12 bodom - tieto hodnoty sa zvyčajne používajú pre tlačené dokumenty.
Relatívne kľúčové slová
.element ( font-size: larger; )largersmaller
Napríklad ak má nadradený prvok veľkosť písma small, podradený prvok s definovanou relatívnou veľkosťou largerzmenší veľkosť písma mediumpre podradený prvok.
Percentuálne hodnoty
.element ( font-size: 110%; )Percentuálne hodnoty, ako napríklad nastavenie veľkosti písma na 110%, sú tiež relatívne k veľkosti písma nadradeného prvku, ako je uvedené v ukážke nižšie:
Prezrite si pero qdbELL od CSS-Tricks (@ css-tricks) na CodePen.
Jednotka em
.element ( font-size: 2em; )Jednotka em je relatívna jednotka na základe vypočítanej hodnoty veľkosti písma nadradeného prvku. To znamená, že podradené prvky sú vždy závislé od rodičov, aby nastavili veľkosť písma. Napríklad:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )V príklade vyššie bude mať odsek veľkosť písma 16px, pretože 1 x 16 = 16px, zatiaľ čo nadpis bude mať 32px, pretože 2 x 16 = 32px. Škálovanie typu má veľa výhod v závislosti od veľkosti písma nadradeného prvku, konkrétne môžeme prvky zabaliť do kontajnera a vedieť, že všetky deti budú vždy navzájom relatívne:
Pozrite si pero Zistenie, ako jednotka em funguje, pomocou CSS-Tricks (@ css-tricks) na CodePen.
Rem jednotka
V prípade rem jednotiek však veľkosť písma závisí od hodnoty koreňového prvku (alebo htmlprvku).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Vo vyššie uvedenom príklade sa jednotka rem rovná 16px (pretože sa dedí z htmlelementu / root), a teda veľkosť písma pre všetky prvky odseku sa počíta na 24px (1,5 x 16 = 24). Na rozdiel od jednotiek em, odsek bude ignorovať štýl všetkých svojich rodičov okrem koreňa.
Túto jednotku podporujú nasledujúce prehliadače:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Tvorba | Tvorba | Tvorba | Tvorba | 10+ | Tvorba | Tvorba |
Ex jednotka
.element ( font-size: 20ex; )Pre ex jednotky by sa 1ex rovnal vypočítanej výške malého písmena x koreňového prvku. V príklade nižšie je teda htmlprvok nastavený na hodnotu 20pxa všetky ostatné veľkosti písma sú určené výškou x konkrétneho písma.
Pozrite si pero Zistenie, ako funguje ex jednotka, pomocou CSS-Tricks (@ css-tricks) na CodePen.
Experimentovať s demo nad mojou nahradí font-familyna htmlprvku vidieť, ako iný font-veľkosti zmeny.
Výrezové jednotky
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Jednotky výrezu, napríklad vwa vh, nastavujú veľkosť písma prvku vo vzťahu k rozmerom výrezu:
- 1vw = 1% šírky výrezu
- 1vh = 1% výšky výrezu
Ak si vezmeme nasledujúci príklad:
.element ( font-size: 100vh; )Potom sa uvedie, že veľkosť písma prvku by mala byť vždy 100% výšky výrezu (50vh by bolo 50%, 15vh by bolo 15% atď.). V ukážke nižšie skúste zmeniť veľkosť príkladu, aby ste sledovali rozťahovanie typu:
Prezrite si typ Pen Sizing s jednotkami vh od CSS-Tricks (@ css-tricks) na CodePen.
vw jednotky sa líšia v tom, že nastavuje výšku písmen podľa šírky výrezu, takže v ukážke nižšie budete musieť vodorovne zmeniť veľkosť okna prehliadača, aby ste videli tieto zmeny:
Prezrite si typ Pen Sizing s jednotkami vw od CSS-Tricks (@ css-tricks) na CodePen.
Tieto jednotky podporujú nasledujúce prehľadávače:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4,4+ | 7,1+ |
Je dôležité poznamenať, že existujú ďalšie dve výrezové jednotky: vmina vmax. Prvý nájdete hodnoty vha vwa nastaviť font-size ako najmenší z nich, zatiaľ čo vmaxnastaví font-size sa najväčší z týchto dvoch hodnôt.
Jednotka ch
.element ( font-size: 24ch; )chJednotka je podobná exjednotke v tom, že sa nastaví Veľkosť písma prvku vo vzťahu k šírke 0 (nula) glyfy z písma:
Pozrite si typ Pen Sizing s jednotkami ch od CSS-Tricks (@ css-tricks) na CodePen.
Túto jednotku podporuje:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Tvorba | 10+ | Tvorba | 9+ | Tvorba | Tvorba |