Šrifto dydžio ypatybė CSS naudojama šrifto aukščiui ir dydžiui nurodyti. Tai turi įtakos elemento teksto dydžiui. Jo numatytoji reikšmė yra vidutinė ir gali būti taikoma kiekvienam elementui. Į šio turto vertes įeina xx-mažas , mažas , x mažas ir kt.

Sintaksė

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

Šrifto dydis gali būti santykinis arba absoliutus.

Absoliutaus dydžio

Jis naudojamas tam tikro dydžio tekstui nustatyti. Naudojant absoliutų dydį, neįmanoma pakeisti teksto dydžio visose naršyklėse. Tai naudinga, kai žinome fizinį išvesties dydį.

Santykinis dydis

Jis naudojamas teksto dydžiui nustatyti, palyginti su kaimyniniais elementais. Naudojant santykinį dydį, galima keisti teksto dydį naršyklėse.

PASTABA: jei neapibrėžiame šrifto dydžio, įprastam tekstui, pvz., pastraipoms, numatytasis dydis yra 16 pikselių, ty 1 em.

Šrifto dydis su pikseliais

Kai nustatome teksto dydį pikseliais, tai suteikia mums visišką teksto dydžio kontrolę.

Pavyzdys

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

Šrifto dydis su em

Jis naudojamas teksto dydžiui keisti. Dauguma kūrėjų teikia pirmenybę in vietoj pikselių . Jį rekomenduoja pasaulinis žiniatinklio konsorciumas (W3C). Kaip minėta pirmiau, numatytasis teksto dydis naršyklėse yra 16 pikselių. Taigi, galime pasakyti, kad numatytasis dydis 1 em yra 16 pikselių .

Dydžio apskaičiavimo formulė iš pikselių į in yra em = pikseliai/16 .

Pavyzdys

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

Atsakingas šrifto dydis

Teksto dydį galime nustatyti naudodami a vw agregatas , kuris reiškia ' peržiūros srities plotis “. Peržiūros sritis yra naršyklės lango dydis.

1vw = 1 % peržiūros srities pločio.

Jei peržiūros srities plotis yra 50 cm, tada 1vw yra lygus 0,5 cm.

Pavyzdys

Pirmoji pastraipa, kurios plotis 5vw.

Antroji pastraipa, kurios plotis 10vw.

Šrifto dydis su ilgio savybe

Jis naudojamas šrifto ilgiui nustatyti. Ilgis gali būti cm, px, pt ir tt Neigiamos reikšmės ilgio ypatybės neleidžiamos šrifto dydžiu.

Sintaksė

 font-size: length; 

Pavyzdys

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