La propietat font-size en CSS s'utilitza per especificar l'alçada i la mida del tipus de lletra. Afecta la mida del text d'un element. El seu valor per defecte és mitjà i es pot aplicar a tots els elements. Els valors d'aquesta propietat inclouen xx-petit , petit , x-petit , etc.

Sintaxi

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

La mida del tipus de lletra pot ser relativa o absoluta.

Mida absoluta

S'utilitza per configurar el text a una mida definida. Utilitzant la mida absoluta, no és possible canviar la mida del text en tots els navegadors. És avantatjós quan coneixem la mida física de la sortida.

inserció ordena java

Mida relativa

S'utilitza per establir la mida del text en relació als seus elements veïns. Amb mida relativa, és possible canviar la mida del text als navegadors.

NOTA: Si no definim una mida de font, per al text normal, com ara els paràgrafs, la mida per defecte és 16px, que és igual a 1em.

Mida de la lletra amb píxels

Quan establim la mida del text amb píxels, ens proporciona el control total sobre la mida del text.

Exemple

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

Mida de la lletra amb em

S'utilitza per canviar la mida del text. La majoria dels desenvolupadors prefereixen en en lloc de píxels . És recomanat pel consorci World Wide Web (W3C). Com s'ha dit anteriorment, la mida del text predeterminada als navegadors és de 16 píxels. Per tant, podem dir que la mida predeterminada de 1em és 16 píxels .

La fórmula per calcular la mida a partir de píxels a en és em = pixels/16 .

Exemple

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

Mida de lletra sensible

Podem definir la mida del text utilitzant a unitat vw , que significa ' amplada de la finestra visual '. La finestra gràfica és la mida de la finestra del navegador.

1vw = 1% de l'amplada de la finestra visual.

Si l'amplada de la finestra és de 50 cm, l'1vw és igual a 0,5 cm.

Exemple

Primer paràgraf amb una amplada de 5vw.

Segon paràgraf amb una amplada de 10vw.

Mida de la lletra amb la propietat length

S'utilitza per definir la mida del tipus de lletra en longitud. La longitud pot ser en cm, px, pt, etc. Valors negatius de llargada propietats no estan permeses en mida de font.

Sintaxi

 font-size: length; 

Exemple

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