CSS:n font-size-ominaisuutta käytetään määrittämään fontin korkeus ja koko. Se vaikuttaa elementin tekstin kokoon. Sen oletusarvo on medium ja sitä voidaan soveltaa jokaiseen elementtiin. Tämän kiinteistön arvot sisältävät xx-pieni , pieni , x-pieni , jne.

Syntaksi

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Fontin koko voi olla suhteellinen tai absoluuttinen.

osittainen lateksijohdannainen

Absoluuttinen koko

Sitä käytetään tekstin määrittämiseen tiettyyn kokoon. Absoluuttista kokoa käyttämällä ei ole mahdollista muuttaa tekstin kokoa kaikissa selaimissa. Se on edullista, kun tiedämme lähdön fyysisen koon.

Suhteellisen kokoinen

Sitä käytetään määrittämään tekstin koko suhteessa sen viereisiin elementteihin. Suhteellisen koon avulla on mahdollista muuttaa tekstin kokoa selaimissa.

HUOMAUTUS: Jos emme määritä fonttikokoa, normaalin tekstin, kuten kappaleiden, oletuskoko on 16px, mikä vastaa 1em.

Fonttikokoinen pikseleillä

Kun asetamme tekstin koon pikseleillä, se antaa meille täyden hallinnan tekstin koosta.

Esimerkki

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Fontin kokoinen niiden kanssa

Sitä käytetään tekstin koon muuttamiseen. Useimmat kehittäjät haluavat sisään sijasta pikseliä . World Wide Web Consortium (W3C) suosittelee sitä. Kuten edellä mainittiin, oletustekstin koko selaimissa on 16 kuvapistettä. Joten voimme sanoa, että oletuskoko 1em On 16px .

Kaava koon laskemiseksi pikseliä to sisään On em = pikseliä/16 .

Esimerkki

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Responsiivinen fonttikoko

Voimme asettaa tekstin koon käyttämällä a vw yksikkö , joka tarkoittaa ' näkymän leveys '. Näkymä on selainikkunan kokoinen.

1vw = 1 % kuvaportin leveydestä.

Jos näkymän leveys on 50 cm, 1vw on 0,5 cm.

Esimerkki

Ensimmäinen kappale, jonka leveys on 5vw.

Toinen kappale, jonka leveys on 10vw.

Fonttikoko pituus-ominaisuuden kanssa

Sitä käytetään fontin pituuden määrittämiseen. Pituus voi olla cm, px, pt jne. Negatiiviset arvot pituus ominaisuudet eivät ole sallittuja fonttikokoisina.

Syntaksi

 font-size: length; 

Esimerkki

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>