En CSS, ¿cómo cambia el tamaño de fuente de h1 y h2?

2 minutos de lectura

avatar de usuario
ahmed

En un tema de WordPress veintiocho. Quiero cambiar el tamaño de los encabezados Cuando envuelvo mis encabezados alrededor de las etiquetas h1 y h2 de la siguiente manera

<h1>My h1 heading </h1>
<h2> My h2 heading </h2>

El tamaño de fuente del encabezado en el tema que estoy usando es casi el mismo que el de la fuente del contenido, excepto que están en negrita. Así que mis encabezados no son muy prominentes.

Supongo que necesitaría cambiar algo en el archivo CSS. Por favor avise qué es exactamente lo que necesita poner.

  • Puede parecer obvio, pero asegúrese de que no haya otro contenedor dentro del que está viendo que esté definiendo un tamaño de fuente. 🙂

    – Amalgovino

    5 de agosto de 2014 a las 23:15

  • También asegúrese de que nadie haya usado !important en algún otro archivo CSS. Terminé aquí (esta pregunta) porque estaba tratando de cambiar el tamaño de h2 en una página específica y simplemente no estaba cambiando. Empecé a pensar que me estaba volviendo loco y que estaba usando la sintaxis incorrecta o algo así. Eventualmente descubrí que alguien más había establecido el tamaño h2 !importante mucho más adelante. Puaj. Nunca uses “!importante”…

    – ZeekLTK

    17 de julio de 2015 a las 14:47


  • También puede cambiar el tamaño de fuente de las etiquetas h1 o h2 en algunas ocasiones configurando el argumento de estilo directamente en html como <h1 style="font-size:2.25rem;">My h1 heading </h1> y deje que los otros encabezados sean configurados por el archivo .css

    – Elías

    10 de febrero de 2021 a las 17:25

avatar de usuario
bram vanroy

h1 {
  font-weight: bold;
  color: #fff;
  font-size: 32px;
}

h2 {
  font-weight: bold;
  color: #fff;
  font-size: 24px;
}

Tenga en cuenta que después de color puede usar una palabra (p. ej. white), un código hexadecimal (p. ej. #fff) o RGB (p. ej. rgb(255,255,255)) o RGBA (p. ej. rgba(255,255,255,0.3)).

 h1 { font-size: 150%; }
 h2 { font-size: 120%; }

Sintonice según sea necesario.

¿Qué has probado? Esto debería funcionar.

h1 { font-size: 20pt; }
h2 { font-size: 16pt; }

Si desea cambiar un encabezado específicamente, esta es una solución mucho más fácil

<style>
    h1.increase {
       font-size: 15px;
}
</style>

<h1 class="increase">Header</h1>

Si solo cambia el tamaño de fuente, el texto podría cruzarse en tipos de dispositivos más pequeños.

<style>
.heading-1{
  font-size: 350%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

ingrese la descripción de la imagen aquí

Para que responda, considere ajustar también la altura de la línea.

<style>
.heading-1{
  font-size: 350%!important;
  line-height: 120%!important;
}
</style>

<h1 class="heading-1">
  Get in Touch
</h1>

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?