logo

CSS veličina fonta

Svojstvo veličine fonta u CSS-u koristi se za određivanje visine i veličine fonta. Utječe na veličinu teksta elementa. Njegova zadana vrijednost je srednja i može se primijeniti na svaki element. Vrijednosti ovog svojstva uključuju xx-mali , mali , x-mali itd.

Sintaksa

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

Veličina fonta može biti relativna ili apsolutna.

Apsolutna veličina

Koristi se za postavljanje teksta na određenu veličinu. Korištenjem apsolutne veličine nije moguće promijeniti veličinu teksta u svim preglednicima. Prednost je kada znamo fizičku veličinu izlaza.

Relativna veličina

Koristi se za postavljanje veličine teksta u odnosu na njegove susjedne elemente. S relativnom veličinom moguće je promijeniti veličinu teksta u preglednicima.

NAPOMENA: Ako ne definiramo veličinu fonta, onda je za normalan tekst kao što su odlomci, zadana veličina 16px, što je jednako 1em.

Veličina fonta s pikselima

Kada veličinu teksta postavljamo pikselima, tada nam to daje punu kontrolu nad veličinom teksta.

Primjer

 #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> 
Testirajte sada

Veličina slova s ​​em

Koristi se za promjenu veličine teksta. Većina programera preferira u umjesto piksela . Preporuča ga konzorcij World Wide Web (W3C). Kao što je gore navedeno, zadana veličina teksta u preglednicima je 16 piksela. Dakle, možemo reći da je zadana veličina 1em je 16 px .

Formula za izračunavanje veličine iz piksela do u je em = piksela/16 .

java pitanja za intervju

Primjer

 #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> 
Testirajte sada

Responzivna veličina fonta

Veličinu teksta možemo postaviti pomoću a vw jedinica , što je kratica za ' širina okvira za prikaz '. Okvir za prikaz je veličine prozora preglednika.

1vw = 1% širine okvira za prikaz.

Ako je širina prozora 50 cm, tada je 1vw jednak 0,5 cm.

Primjer

Prvi odlomak širine 5vw.

Drugi odlomak širine 10vw.

Testirajte sada

Veličina fonta sa svojstvom duljine

Koristi se za podešavanje veličine fonta u dužini. Duljina može biti u cm, px, pt, itd. Negativne vrijednosti od duljina svojstvo nije dopušteno u veličini fonta.

Sintaksa

 font-size: length; 

Primjer

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