font-sizeLastnost določa velikost oziroma višino, pisave. font-sizene vpliva samo na pisavo, na katero je uporabljena, temveč se uporablja tudi za izračun vrednosti enot em, rem in ex dolžine.
p ( font-size: 20px; )font-sizelahko kot vrednosti sprejme ključne besede, dolžinske enote ali odstotke. Pomembno pa je opozoriti, da je ta obvezna vrednost , če je razglašena za del fontstenografske lastnosti font-size. Če ni vključena v stenografijo, se celotna vrstica prezre.
Vrednosti dolžine (npr. Px, em, rem, ex itd.), Na katere se nanašajo, font-sizene morejo biti negativne.
Absolutne ključne besede in vrednosti
.element ( font-size: small; )Sprejema naslednje absolutne vrednosti ključnih besed:
xx-smallx-smallsmallmediumlargex-largexx-large
Te absolutne vrednosti so preslikane v določene velikosti pisav, kot jih izračuna brskalnik. Lahko pa uporabite tudi dve vrednosti ključnih besed, ki sta sorazmerni z velikostjo pisave nadrejenega elementa.
Druge absolutne vrednosti vključujejo mm(milimetre), cm(centimetre), in(palce), pt(točke) in pc(picas). Ena točka je enaka 1/72 palca, ena pika pa 12 točk - te vrednosti se običajno uporabljajo za tiskane dokumente.
Relativne ključne besede
.element ( font-size: larger; )largersmaller
Če ima na primer nadrejeni element velikost pisave small, bo podrejeni element z opredeljeno relativno velikostjo velikosti largerpisave enak mediumpodrejenemu elementu.
Odstotne vrednosti
.element ( font-size: 110%; )Odstotne vrednosti, na primer nastavitev velikosti pisave 110%, so prav tako odvisne od velikosti pisave nadrejenega elementa, kot je prikazano v predstavitvi spodaj:
Oglejte si Pen qdbELL by CSS-Tricks (@ css-tricks) na CodePen.
Em enota
.element ( font-size: 2em; )Enota em je relativna enota, ki temelji na izračunani vrednosti velikosti pisave nadrejenega elementa. To pomeni, da so podrejeni elementi vedno odvisni od starša, da nastavi velikost pisave. Na primer:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )V zgornjem primeru bo odstavek imel velikost pisave 16px, ker je 1 x 16 = 16px, naslov pa 32px, ker je 2 x 16 = 32px. Velikost velikosti ima veliko prednosti, odvisno od velikosti pisave nadrejenega elementa, namreč elemente lahko zavijemo v vsebnik in vemo, da bodo vsi otroci vedno med seboj povezani:
Oglejte si Pen, kako ugotovite, kako deluje enota em s pomočjo CSS-Tricks (@ css-tricks) na CodePenu.
Rem enota
Pri enotah rem pa je velikost pisave odvisna od vrednosti korenskega elementa (ali htmlelementa).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )V zgornjem primeru je enota rem enaka 16 slikovnih pik (ker je podedovana od htmlelementa / root), zato bo velikost pisave za vse elemente odstavka izračunana na 24 slikovnih pik (1,5 x 16 = 24). V nasprotju z enotami odstavek bo poleg korena prezrl slog vseh svojih staršev.
To enoto podpirajo naslednji brskalniki:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Deluje | Deluje | Deluje | Deluje | 10+ | Deluje | Deluje |
Nekdanja enota
.element ( font-size: 20ex; )Za ex enote bi bil 1ex enak izračunani višini male črke x korenskega elementa. Torej je v spodnjem primeru htmlelement nastavljen na, 20pxvse ostale velikosti pisav pa so določene z višino x te pisave.
Oglejte si pisalo, kako ugotovite, kako ex enota deluje s CSS-triki (@ css-triki) na CodePenu.
Eksperimentiranje z demo nad mojo zamenjavo font-familyna htmlelement, da vidite, kako drugi pisave velikosti spremembe.
Enote vidnega polja
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Enote vidnega polja, kot sta vwin vh, nastavijo velikost pisave elementa glede na dimenzije vidnega polja:
- 1vw = 1% širine vidnega polja
- 1vh = 1% višine vidnega polja
Če vzamemo naslednji primer:
.element ( font-size: 100vh; )Potem bo navedeno, da mora biti velikost pisave elementa vedno 100% višine vidnega polja (50vh bi bilo 50%, 15vh bi bilo 15% itd.). V spodnji predstavitvi poskusite spremeniti velikost primera, da si ogledate raztezanje tipa:
Oglejte si vrsto velikosti pisala z enotami vh podjetja CSS-Tricks (@ css-tricks) na CodePen.
vw enote se razlikujejo po tem, da nastavi višino črkovnih oblik glede na širino vidnega polja, zato boste v spodnji predstavitvi morali spremeniti velikost okna brskalnika vodoravno, da boste videli te spremembe:
Oglejte si vrsto velikosti pisala z enotami vw s strani CSS-Tricks (@ css-tricks) na CodePen.
Te enote podpirajo naslednji brskalniki:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4,4+ | 7.1+ |
Pomembno je omeniti, da obstajata še dve enoti pregledovalnika: vminin vmax. Prvi bo našel vrednosti vhin vwin določil velikost pisave kot najmanjšo od obeh, medtem ko vmaxje velikost pisave nastavljen na največjo od teh dveh vrednosti.
Enota ch
.element ( font-size: 24ch; )chEnota je podoben exenote, ki bo nastavitev pisave elementa glede na širino 0 (nič) glif pisave:
Oglejte si vrsto velikosti pisala z enotami ch s strani CSS-Tricks (@ css-tricks) na CodePen.
To enoto podpira:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Deluje | 10+ | Deluje | 9+ | Deluje | Deluje |