Š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> Išbandykite dabar Š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> Išbandykite dabar 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.
Išbandykite dabarŠ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> Išbandykite dabar