font-sizeVara täpsustab suurus, või kõrgus font. font-sizemõjutab mitte ainult fondi, millele seda rakendatakse, vaid seda kasutatakse ka em, rem ja ex pikkuse ühikute väärtuse arvutamiseks.
p ( font-size: 20px; )font-sizesaab väärtustena aktsepteerida märksõnu, pikkuse ühikuid või protsente. Oluline on siiski märkida, et kui see on deklareeritud fontlühikese omaduse osana , font-sizeon see kohustuslik väärtus. Kui see pole kirjas, ei arvestata kogu rida.
Pikkuse väärtused (nt px, em, rem, ex jne), mida rakendatakse, font-sizeei saa olla negatiivsed.
Absoluutsed märksõnad ja väärtused
.element ( font-size: small; )See aktsepteerib järgmisi märksõna absoluutväärtusi:
xx-smallx-smallsmallmediumlargex-largexx-large
Need absoluutväärtused vastendatakse konkreetsete fondisuurustega, nagu brauser arvutab. Kuid võite kasutada ka kahte märksõna väärtust, mis on seotud vanemelemendi fondisuurusega.
Muud absoluutväärtused hõlmavad mm(millimeetrit), cm(sentimeetrit), in(tolli), pt(punkti) ja pc(pica). Üks punkt on võrdne 1/72 tolli, samas kui üks pica on võrdne 12 punktiga - neid väärtusi kasutatakse tavaliselt prinditud dokumentide jaoks.
Suhtelised märksõnad
.element ( font-size: larger; )largersmaller
Näiteks kui vanemelemendi fondisuurus on small, muudab alamelement määratletud suhtelise suurusega largersuurus võrdseks mediumalamelemendi fondi suurusega .
Protsentväärtused
.element ( font-size: 110%; )Protsendiväärtused, näiteks fondi suuruse määramine 110%, on suhtelised ka vanemelemendi fondi suurusega, nagu on näidatud allpool toodud demos:
Vaadake CodePenil CSS-Tricks (@ css-tricks) Pen qdbELL-i.
Nende üksus
.element ( font-size: 2em; )Em-ühik on suhteline ühik, mis põhineb emaelemendi fondisuuruse arvutatud väärtusel. See tähendab, et lapse elemendid sõltuvad alati nende vanematest oma fondi suuruse määramisel. Näiteks:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Ülalolevas näites on lõigu fondisuurus 16 pikslit, kuna 1 x 16 = 16 pikslit, pealkirja aga 32 pikslit, kuna 2 x 16 = 32 pikslit. Sõltuvalt vanemelemendi fondisuurusest on suuruse suurendamisel palju eeliseid, nimelt saame elemendid pakendada konteinerisse ja teada, et kõik lapsed on alati üksteise suhtes:
Vaadake pliiatsit, et selgitada välja, kuidas emüksus CSS-Tricks (@ css-tricks) toimib CodePenis.
Remiüksus
Rem-üksuste puhul sõltub fondi suurus aga juurelemendi (või htmlelemendi) väärtusest.
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Ülaltoodud näites on rem-ühik võrdne 16px-ga (kuna see on päritud html/ root -elemendist) ja seega arvutatakse kõigi lõiguelementide fondi suuruseks 24px (1,5x16 = 24). Erinevalt em-ühikutest eirab lõik lisaks juurele kõigi selle vanemate stiili.
Seda seadet toetavad järgmised brauserid:
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Töötab | Töötab | Töötab | Töötab | 10+ | Töötab | Töötab |
Endine üksus
.element ( font-size: 20ex; )Ex-üksuste puhul võrduks 1ex juurelemendi väiketähe x arvutatud kõrgusega. Nii et allpool toodud näites on htmlelemendiks seatud väärtus 20pxja kõik muud fondisuurused määratakse konkreetse fondi x-kõrguse järgi.
Vaadake pliiatsit, et selgitada välja, kuidas ex-üksus töötab CSS-Tricksi (@ css-tricks) abil CodePenis.
Katsetage minu kohal font-familyoleva htmlelemendi elemendi asendamise demoga, et näha, kuidas muud fondi suurused muutuvad.
Vaateakna ühikud
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Vaateakna üksused, näiteks vwja vh, määravad elemendi fondi suuruse vaateava mõõtmete suhtes:
- 1vw = 1% vaateava laiusest
- 1vh = 1% vaateava kõrgusest
Nii et kui võtame järgmise näite:
.element ( font-size: 100vh; )Siis märgitakse sellega, et elemendi fondi suurus peaks alati olema 100% vaateava kõrgusest (50vh oleks 50%, 15vh oleks 15% ja nii edasi). Allolevas demos proovige muuta näite kõrgust, et vaadata tüübi venitust:
Vaadake CodePenilt CSS-Tricksi (@ css-tricks) pliiatsi suuruse tüüp vh üksustega.
vw ühikud erinevad selle poolest, et see määrab kirjavormide kõrguse vaateakna laiuse järgi, nii et allpool toodud demos peate brauseriakna horisontaalselt suurust muutma, et neid muudatusi näha:
Vaadake CodeSeni lehelt CSS-Tricks'i (@ css-tricks) pliiatsi suuruse tüüp vw üksustega.
Neid üksusi toetavad järgmised brauserid:
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Oluline on märkida, et on veel kaks vaateakna üksust: vminja vmax. Esimene leiab väärtused vhja vwja määrab fondi suuruse kahest väiksemaks, samal ajal vmaxkui fondi suurus on neist kahest suurim.
Ch üksus
.element ( font-size: 24ch; )chÜksus on sarnane exseade, sest see aitab määrata fondi-suurust osa võrreldes laiuse 0 (null) tähemärkide font:
Vaadake CodePenilt CSS-Tricksi (@ css-tricks) pliiatsi suuruse tüübi ch ühikutega.
Seda seadet toetab:
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Töötab | 10+ | Töötab | 9+ | Töötab | Töötab |