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 sadaVelič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