A veces, al crear una p gina web, es necesario aumentar el Tama o de todas las Fuentes de la p gina. Esto puede ser til si el texto es demasiado superficial para Leer o si necesita mejorar la accesibilidad para las personas con problemas de visi n. En tales casos, puede usar CSS para cambiar el Tama o de todas las Fuentes.
Para hacer esto, puede usar la propiedad font-size en CSS, que le permite establecer el Tama o de fuente del elemento. Para cambiar el Tama o de todas las Fuentes de una p gina, puede aplicar esta propiedad a la etiqueta body. Si solo desea aumentar el Tama o de un elemento espec fico, puede aplicar la propiedad font-size a ese elemento o a su clase.
Por ejemplo, para aumentar el Tama o de todas las Fuentes en una p gina en un 20%, puede agregar el siguiente c digo CSS:
body {font-size: 120%;
}
En este ejemplo, un valor de 120% significa que todas las Fuentes de la p gina se ampliar n en un 20% de su Tama o original. Este valor se puede personalizar seg n el aumento que desee.
- Regla para aumentar el Tama o de las Fuentes en CSS
- Aplicar el valor em para cambiar el Tama o del texto
- Usando rem para escalar Fuentes
- Cambiar el Tama o del texto con porcentajes en CSS
- Aplicar p xeles para cambiar el Tama o de las Fuentes
Regla para aumentar el Tama o de las Fuentes en CSS
. Esta propiedad especifica el Tama o de fuente del elemento seleccionado y sus descendientes.
es el siguiente:
- Valor absoluto:
- Valor relativo:
establece una fuente de 12 p xeles.
aumenta el Tama o de fuente en 1.5 veces con respecto al Tama o actual.
aumentar el Tama o de la fuente en un escal n.
Tambi n puede aplicar una regla a varios elementos a la vez con el selector. Por ejemplo, para aumentar el Tama o de las Fuentes de todos los p rrafos de una p gina, puede utilizar la siguiente regla:
p { font-size: 16px; }
Como resultado de la aplicaci n de la regla anterior, todos los p rrafos de la p gina tendr n un Tama o de fuente de 16 p xeles.
Aplicar el valor em para cambiar el Tama o del texto
Para aplicar el valor em para cambiar el Tama o del texto, debe especificar el Tama o deseado en em. Por ejemplo, si desea aumentar el Tama o del texto en un 50%, puede establecer un valor de 1.5 em.
Este m todo es especialmente til cuando necesita cambiar el Tama o de todos los elementos de texto en una p gina. Si establece el valor em en el elemento body, el Tama o del texto se establecer autom ticamente para todos los elementos secundarios.
La ventaja de usar el valor em es que le permite crear un dise o flexible y adaptable. Cuando cambia el Tama o de fuente del elemento principal, todos los elementos secundarios cambiar n su Tama o proporcionalmente. Esto le permite controlar f cilmente los tama os de texto en funci n de la resoluci n de la pantalla o las preferencias del usuario.
Usando rem para escalar Fuentes
El Tama o de fuente especificado en rem depende del Tama o de fuente del elemento circundante. Si el elemento externo tiene un Tama o de fuente de 16 p xeles, entonces 1 rem ser a igual a 16 p xeles.
Para usar la unidad de medida rem en CSS, debe establecer el Tama o de fuente para el elemento ra z de la p gina (generalmente este o ) y luego establecer los tama os de fuente para otros elementos en relaci n con ese Tama o base.
Considere un ejemplo:
| CSS | HTML | Resultado |
|---|---|---|
| html { | Este es un texto con una fuente ampliada. | Este es un texto con una fuente ampliada. |
En este ejemplo, establecemos un Tama o de fuente de 16 p xeles para el elemento ra z (html) y luego, utilizando la unidad de medida rem, establecemos un Tama o de fuente de 1.5 rem para el elemento