font-sizeOminaisuus määrittää koko, tai korkeus, fontin. font-sizevaikuttaa paitsi kirjasimeen, johon sitä käytetään, mutta sitä käytetään myös laskemaan em, rem ja ex-pituusyksiköiden arvo.
p ( font-size: 20px; )font-sizevoi hyväksyä avainsanat, pituusyksiköt tai prosentit prosentteina. On kuitenkin tärkeää huomata, että kun se ilmoitetaan osana fontlyhytomaisuuden ominaisuutta, font-sizese on pakollinen arvo. Jos se ei sisälly lyhenteeseen, koko rivi jätetään huomioimatta.
Pituuden arvot (esim. Px, em, rem, ex jne.) font-sizeEivät voi olla negatiivisia.
Absoluuttiset avainsanat ja arvot
.element ( font-size: small; )Se hyväksyy seuraavat absoluuttiset avainsanojen arvot:
xx-smallx-smallsmallmediumlargex-largexx-large
Nämä absoluuttiset arvot kartoitetaan tiettyihin kirjasinkokoihin selaimen laskemana. Voit kuitenkin käyttää myös kahta avainsana-arvoa, jotka ovat suhteessa pääelementin kirjasinkokoon.
Muita absoluuttisia arvoja ovat mm(millimetrit), cm(senttimetrit), in(tuumat), pt(pisteet) ja pc(picas). Yksi piste on 1/72 tuumaa, kun taas yksi pica on 12 pistettä - näitä arvoja käytetään tyypillisesti tulostetuissa asiakirjoissa.
Suhteelliset avainsanat
.element ( font-size: larger; )largersmaller
Esimerkiksi, jos ylätason elementin kirjasinkoko on small, alielementti, jolla on määritelty suhteellinen koko, largertekee fonttikoolta yhtä mediumalemman elementin.
Prosenttiarvot
.element ( font-size: 110%; )Prosenttiarvot, kuten kirjasinkoon asettaminen 110%, ovat myös suhteessa vanhemman elementin kirjasinkokoon alla olevan esittelyn mukaisesti:
Katso CSS-Tricksin kynä qdbELL (@ css-tricks) CodePenistä.
Ne yksikkö
.element ( font-size: 2em; )Em-yksikkö on suhteellinen yksikkö, joka perustuu pääelementin kirjasinkoon laskettuun arvoon. Tämä tarkoittaa, että lapsielementit ovat aina riippuvaisia vanhemmistaan kirjasinkoon asettamisessa. Esimerkiksi:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )Yllä olevassa esimerkissä kappaleen kirjasinkoko on 16 kuvapistettä, koska 1 x 16 = 16 kuvapistettä, kun taas otsikko on 32 kuvapistettä, koska 2 x 16 = 32 kuvapistettä. Suurentamisella on monia etuja vanhemman elementin kirjasinkoon mukaan, nimittäin voimme kääriä elementit säiliöön ja tietää, että kaikki lapset ovat aina suhteessa toisiinsa:
Katso kynä, joka selvittää, kuinka em-yksikkö toimii CSS-Tricksillä (@ css-tricks) CodePenillä.
Rem-yksikkö
Rem-yksiköiden tapauksessa fontin koko riippuu kuitenkin juurielementin (tai htmlelementin) arvosta .
html ( font-size: 16px; ) p ( font-size: 1.5rem; )Yllä olevassa esimerkissä rem-yksikkö on yhtä suuri kuin 16 kuvapistettä (koska se periytyy html/ root -elementistä), ja siten kaikkien kappaleelementtien kirjasinkoko lasketaan 24 kuvapisteeksi (1,5 x 16 = 24). Toisin kuin em-yksiköt, kappale jättää huomiotta kaikkien vanhempiensa tyylin juuren lisäksi.
Seuraavat selaimet tukevat tätä laitetta:
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | 10+ | Toimii | Toimii |
Entinen yksikkö
.element ( font-size: 20ex; )Ex-yksiköille 1ex olisi yhtä suuri kuin juurielementin pienten kirjainten x laskettu korkeus. Joten alla olevassa esimerkissä htmlelementiksi on asetettu 20pxja kaikki muut kirjasinkoot määräytyvät kyseisen kirjasimen x-korkeuden mukaan.
Katso kynä, joka kertoo, kuinka entinen yksikkö toimii CSS-Tricksin (@ css-tricks) avulla CodePenillä.
Kokeilla demo yläpuolella minun korvaa font-familyon htmlelementti nähdä, miten muut font-koot muutos.
Näyttöikkunayksiköt
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Näkymän yksiköt, kuten vwja vh, asettavat elementin kirjasinkoon suhteessa näkymän mittoihin:
- 1vw = 1% näkymän leveydestä
- 1vh = 1% näkymän korkeudesta
Joten jos otamme seuraavan esimerkin:
.element ( font-size: 100vh; )Sitten tässä todetaan, että elementin fontin koon tulisi aina olla 100% näkymän korkeudesta (50vh olisi 50%, 15vh olisi 15% ja niin edelleen). Yritä muuttaa esimerkin korkeutta alla olevassa esittelyssä, jotta voit katsella tyypin venymistä:
Katso CSS-Tricksin (@ css-tricks) kynän koon tyyppi vh-yksiköillä CodePenistä.
vw Yksiköt eroavat toisistaan siinä, että se asettaa kirjaimien korkeuden näkymän leveyden mukaan, joten alla olevassa esittelyssä sinun on muutettava selainikkunan kokoa vaakatasossa nähdäksesi nämä muutokset:
Katso CSS-Tricksin (@ css-tricks) kynän koon tyyppi vw-yksiköillä CodePenistä.
Seuraavat selaimet tukevat näitä yksiköitä:
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
On tärkeää huomata, että on olemassa kaksi muuta näkymän yksikköä: vminja vmax. Ensimmäinen löytää arvot vhja vwja asettaa kirjasinkoon pienimmäksi näistä kahdesta ja vmaxasettaa kirjasinkoon suurimmaksi näistä kahdesta arvosta.
Ch-yksikkö
.element ( font-size: 24ch; )chYksikkö on samanlainen kuin exyksikkö, että se määrittää fontin koon elementin suhteessa leveys 0 (nolla) kuviota fontin:
Katso CSS-Tricksin (@ css-tricks) kynän koon tyyppi ch-yksiköillä CodePenistä.
Tätä laitetta tukee:
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Toimii | 10+ | Toimii | 9+ | Toimii | Toimii |