TechCodeview

Vlastnost font-size v CSS se používá k určení výšky a velikosti písma. Ovlivňuje velikost textu prvku. Jeho výchozí hodnota je střední a lze ji použít na každý prvek. Hodnoty této vlastnosti zahrnují xx-malý , malý , x-malé , atd.

Syntax

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

Velikost písma může být relativní nebo absolutní.

Absolutní velikost

Slouží k nastavení textu na určitou velikost. Pomocí absolutní velikosti není možné změnit velikost textu ve všech prohlížečích. Je výhodné, když známe fyzickou velikost výstupu.

Relativní velikost

Slouží k nastavení velikosti textu vzhledem k jeho sousedním prvkům. Pomocí relativní velikosti je možné změnit velikost textu v prohlížečích.

POZNÁMKA: Pokud nedefinujeme velikost písma, pak pro normální text, jako jsou odstavce, je výchozí velikost 16px, což se rovná 1em.

Velikost písma s pixely

Když nastavíme velikost textu pomocí pixelů, pak nám to poskytuje plnou kontrolu nad velikostí textu.

Příklad

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

Velikost písma s em

Používá se ke změně velikosti textu. Většina vývojářů dává přednost v namísto pixelů . Je doporučen konsorciem World Wide Web (W3C). Jak je uvedeno výše, výchozí velikost textu v prohlížečích je 16 pixelů. Můžeme tedy říci, že výchozí velikost 1 m je 16px .

Vzorec pro výpočet velikosti z pixelů na v je em = pixelů/16 .

Příklad

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

Responzivní velikost písma

Velikost textu můžeme nastavit pomocí a jednotka vw , což znamená „ šířka výřezu '. Výřez je velikost okna prohlížeče.

1vw = 1 % šířky výřezu.

Pokud je šířka výřezu 50 cm, pak se 1vw rovná 0,5 cm.

Příklad

První odstavec o šířce 5vw.

Druhý odstavec o šířce 10vw.

Velikost písma s vlastností length

Slouží k nastavení velikosti písma na délku. Délka může být v cm, px, pt atd. Záporné hodnoty délka vlastnosti nejsou povoleny ve velikosti fontu.

Syntax

 font-size: length; 

Příklad

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