La propiedad font-size en CSS se utiliza para especificar la altura y el tamaño de la fuente. Afecta el tamaño del texto de un elemento. Su valor predeterminado es medio y se puede aplicar a todos los elementos. Los valores de esta propiedad incluyen xx-pequeño , pequeño , x-pequeño , etc.

Sintaxis

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

El tamaño de fuente puede ser relativo o absoluto.

tamaño absoluto

Se utiliza para establecer el texto a un tamaño definido. Al utilizar el tamaño absoluto, no es posible cambiar el tamaño del texto en todos los navegadores. Es ventajoso cuando conocemos el tamaño físico de la salida.

Tamano relativo

Se utiliza para establecer el tamaño del texto en relación con sus elementos vecinos. Con el tamaño relativo, es posible cambiar el tamaño del texto en los navegadores.

NOTA: Si no definimos un tamaño de fuente, entonces para el texto normal, como los párrafos, el tamaño predeterminado es 16px, que equivale a 1em.

Tamaño de fuente con píxeles

Cuando configuramos el tamaño del texto con píxeles, nos proporciona el control total sobre el tamaño del texto.

Ejemplo

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

Tamaño de fuente con em

Se utiliza para cambiar el tamaño del texto. La mayoría de los desarrolladores prefieren en en lugar de píxeles . Está recomendado por el consorcio World Wide Web (W3C). Como se indicó anteriormente, el tamaño de texto predeterminado en los navegadores es 16px. Entonces, podemos decir que el tamaño predeterminado de 1em es 16px .

La fórmula para calcular el tamaño de píxeles a en es me = pixels/16 .

Ejemplo

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

Tamaño de fuente responsivo

Podemos establecer el tamaño del texto usando un unidad vw , que significa ' ancho de la ventana gráfica '. La ventana gráfica es del tamaño de la ventana del navegador.

1vw = 1% del ancho de la ventana gráfica.

Si el ancho de la ventana gráfica es de 50 cm, entonces 1vw es igual a 0,5 cm.

Ejemplo

El primer párrafo tiene un ancho de 5vw.

Segundo párrafo con un ancho de 10vw.

java más si

Tamaño de fuente con la propiedad de longitud

Se utiliza para establecer el tamaño de la fuente en longitud. La longitud puede ser en cm, px, pt, etc. Valores negativos de longitud Las propiedades no están permitidas en tamaño de fuente.

Sintaxis

 font-size: length; 

Ejemplo

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