Cómo cambiar el tamaño de la fuente en HTML
Entonces, en este artículo, veremos cómo cambiar el tamaño de la fuente en HTML:
- Usando píxeles
- Usando porcentaje %
- Según el tamaño de la pantalla
- Usando el valor de la unidad efímera
Cómo cambiar el tamaño de fuente en HTML utilizando la propiedad del tamaño de la fuente?
En HTML, el tamaño de fuente se puede cambiar mediante la propiedad del tamaño de fuentes del CSS. La propiedad del tamaño de una fuente admite una lista de opciones para cambiar el tamaño de fuente de acuerdo con algunos criterios. Esta sección describe la lista de posibles opciones de propiedad del tamaño de una fuente para cambiar el tamaño de fuente en html.
- Usando píxeles (PX)
Podemos cambiar el tamaño de fuente con la ayuda de la propiedad del tamaño de fuente CSS y establecer su valor en píxeles. Un píxel es una unidad de medición para especificar la altura, el ancho, el tamaño de la fuente, etc. utilizada por los desarrolladores web. 1 píxel representa la parte 1/96 de una pulgada en una pantalla. El siguiente ejemplo práctico mostrará el uso de esta propiedad con valores de píxeles. Por defecto, el tamaño de fuente es de 16 píxeles.
Código:
Este es el tamaño de fuente normal en un documento HTML.
El tamaño de fuente se cambia a 30 píxeles utilizando la propiedad del tamaño de la fuente CSS.
En este código, escribimos dos párrafos y cambiamos el tamaño de un párrafo a 25px usando la propiedad del tamaño de la fuente CSS.
Producción:
La salida muestra que el tamaño de fuente se cambia correctamente en píxeles.
- Usando porcentaje %
También podemos cambiar el tamaño de la fuente estableciendo el valor de la propiedad del tamaño de fuente CSS en porcentaje contra el tamaño del cuerpo del documento HTML, lo que significa que cuando damos valor en el porcentaje, irá. Veamos el siguiente ejemplo para entender mejor.
Código:
Este es el tamaño de fuente normal en un documento HTML.
El tamaño de la fuente se cambia en porcentaje utilizando la propiedad del tamaño de la fuente CSS.
En este código, creamos dos párrafos y cambiamos el tamaño del segundo párrafo utilizando la propiedad del tamaño de la fuente CSS y establecemos su valor en 150 por ciento.
Producción:
Esta salida muestra que hemos cambiado con éxito el tamaño de fuente al especificar el valor en el porcentaje.
- Establezca el tamaño de la fuente según el tamaño de la pantalla
El tamaño de la fuente también se puede cambiar dinámicamente. Eso significa que nuestro tamaño de fuente cambia de acuerdo con el tamaño de la pantalla dinámicamente. Para cambiar el tamaño de la fuente de acuerdo con la pantalla que usamos VW (ancho de la visión). El siguiente ejemplo muestra el uso de valores de VW en la propiedad del tamaño de la fuente CSS.
Código:
Este es el tamaño de fuente normal en un documento HTML.
El tamaño de la fuente se cambia en porcentaje utilizando la propiedad del tamaño de la fuente CSS.
En este código, creamos dos párrafos y cambiamos el tamaño de un párrafo utilizando el valor de VW que cambiará el tamaño del texto de acuerdo con el tamaño de la pantalla.
Producción:
La salida muestra que el párrafo con el tamaño de texto normal permanece estático, mientras que el párrafo que usa VW valor para cambiar el tamaño de fuente se cambia de tamaño de acuerdo con la pantalla.
- Usando el valor de la unidad efímera
Podemos cambiar el tamaño de fuente utilizando la propiedad del tamaño de la fuente CSS y establecer su valor en EM. Aquí se dice que 1em es igual al tamaño de fuente actual del cuerpo del documento HTML. Por defecto, el tamaño de fuente de documento HTML normal es de 16 píxeles, por lo que podemos decir que 1em = 16 píxeles. El siguiente ejemplo práctico muestra el uso de la unidad EM.
Código:
Este es el tamaño de fuente normal en el documento HTML.
El tamaño de la fuente se cambia en porcentaje utilizando la propiedad del tamaño de la fuente CSS.
En este código, hemos cambiado el tamaño del párrafo utilizando la propiedad del tamaño de fuente CSS y establece su valor en 2 EM, que es igual a 32 píxeles.
Producción:
Esta salida muestra que hemos cambiado el tamaño de fuente utilizando el valor EM de la propiedad del tamaño de la fuente CSS.
Aquí tienes! Ahora puede cambiar con éxito el tamaño de fuente en HTML utilizando cualquiera de los métodos mencionados anteriormente.
Conclusión
En HTML, podemos cambiar el tamaño de la fuente utilizando la propiedad del tamaño de la fuente CSS y establecer sus valores en píxeles, porcentaje, ancho de la visión y unidad efímera. En este artículo, hemos pasado por todos los conjuntos de valor que se pueden usar con la propiedad del tamaño de la fuente CSS para cambiar el tamaño de la fuente en HTML. Los píxeles, el porcentaje y la EM son los valores fijos, mientras que la opción de ventana gráfica manipula la fuente de acuerdo con el tamaño de la pantalla.