Categorias: Wordpress

✏️¿Cómo cambiar la fuente, el tamaño o el color de tu texto en CSS o HTML?

Si usa WordPress, probablemente se pregunte cómo cambiar la fuente (tamaño, color, …) en HTML o CSS
De hecho, el editor clásico es mucho menos competente que un simple archivo de Word donde tiene una multitud de opciones para configurar su texto.

Aquí el editor solo permite poner el texto:

  • En formato de título o párrafo,
  • En negrita, cursiva, organizar el texto en lista a punto o número
  • Hagar una citación, alinee el texto e inserte un enlace.

 

¿Cómo deberíamos hacer para cambiar el color? ¿Ampliar el texto? …

 

Aquí están los diferentes estilos que puedes modificar usando el editor HTML:

  1. font-family: Familia de fuente
  2. font-size: tamaño de tu fuente
  3. font-style: negrita, cursiva, oblicua …
  4. font-variant: variante de fuente
  5. font-weight: tamaño de letra
  6. font-color: color de fuente

 

¡ Importante !

 

Para integrar los diferentes estilos en su texto debe proceder de la siguiente manera:

<p style = "font-size: 25px;"> tamaño de fuente 25 texto </p>

tamaño de fuente 25 texto

 

<span style = "color: # 009bdd;"> Texto en color azul </span>

Texto en color azul

 

<p style="font-variant:small-caps;">pequeño texto en mayúscula</p>

pequeño texto en mayúscula

 

Inserte un elemento de estilo antes de su texto, ya sea en la etiqueta p, o insertando una etiqueta span.
Mostrar el elemento o elementos que desea editar tamaño, familia, estilo, variante, peso y color

🎨 Font-family : Familia de fuente

Para información: los nombres de las familias que contienen espacios no deben estar necesariamente entre comillas para funcionar. Ejemplo: “MS Trébuchet” la prueba en el ejemplo.

Familia tipográfica: “Roboto, Helvetica, Arial, Verdana, sans-serif;”

En mi caso, utilizo la fuente Roboto, debes saber que si esta fuente no funciona en un navegador, Helvetica será compatible, etc. Es mejor terminar con un genérico familiar para asegurar la aparición de la policía. Orden, por lo tanto, tiene un lugar importante en el uso de fuentes.

 

 

Ejemplo :

<p style="font-family: Times New Roman,Times,serif;">font-family: Times New Roman,Times,serif</p>

font-family:Times New Roman, Times, serif;

🎨 Font-size : Establece el tamaño de tu texto

El valor puede ser reemplazado por la siguiente lista:

  • xx-large
  • x-large
  • larger
  • large
  • medium
  • small
  • smaller
  • x-small
  • xx-small
  • length
  • % (porcentaje)

Si como yo prefieres la precisión no dudes en poner un número.

  • X px (donde X es el tamaño que quieres)

 

Ejemplo :

<p style="font-size:20px;">font-size: 20px</p>

font-size: 20px

🎨 Font-style: Cursiva, oblicua ...

  • italic (cursiva)
  • oblique
  • normal
  • Xdeg oblique (establece el% del ángulo de inclinación)

 

Ejemplo :

<p style="font-style:italic;">font-style: italic</p>

font-style: italic

🎨 Font-variant : Variante de fuente

Si desea que su texto aparezca con variaciones de forma, como en mayúsculas

  • normal
  • small-caps (letras mayúsculas pequeñas)
  • common-ligatures tabular-nums;
  • no-common-ligatures proportional-nums;

 

Ejemplo :

<p style="font-variant:small-caps;">font-variant:small-caps</p>

font-variant:small-caps

🎨 Font-weight: Tamaño de fuente

Este es el grosor, es una forma de poner el texto en negrita, incluso si la meta <strong>  es más interesante desde un punto de vista SEO

  • lighter
  • normal
  • 100
  • 200
  • bold
  • bolder

 

Ejemplo :

<p style="font-weight:lighter;">font-weight:lighter</p>

font-weight:lighter

🎨 Font-color : Color de fuente

valor
color_name
hex_number
rgb_number

Descripción
Especifica el color con un nombre de color (como “red”)
Especifica el color del texto con un código hexadecimal (como “#009bdd”)
Especifica el color del texto con un código rgb (como “rgb (0,155,221)”)

Google pone a disposición una herramienta cuando busca color en HEX, por ejemplo, esta herramienta le permite encontrar fácilmente un color y obtener la información necesaria para su uso.

 

Ejemplo :

<p style="color:#009bdd;">color:#009bdd</p>

color:#009bdd

NUESTROS SERVICIOS

Si desea crear su sitio web con WordPress, no dude en seguir nuestros artículos o utilizar nuestros servicios.
Aurelien Ruse

Aventurero en marketing digital y creador de Fratech Venture, decidí construir mi blog para ayudar a las personas que quieren aprender a dominar los conceptos básicos de Wordpress y del Marketing Digital.

Publicación recientes

Cómo hacer dropshipping con WordPress

Inicie su comercio electrónico de dropshipping utilizando plugins automatizados de wordpress y woocommerce para aumentar…

3 semanas hace

Como poner color a las letras en html

Poner el color de la letra en HTML directamente a través de HTML o con…

3 semanas hace

¿Dónde encontrar imágenes libres de derechos para las publicaciones de su blog?

Muchos sitios ofrecen imágenes para que pueda usarlas para su sitio de forma gratuita, aquí…

3 semanas hace

Optimiza tus imágenes con WordPress

Mejore su velocidad, su SEO optimizando el tamaño, el peso y la calidad de sus…

3 semanas hace

Escribir la categoría de producto automáticamente en las meta descripciones

Un sitio con muchos productos necesita automatización y para aumentar su SEO se recomienda agregar…

4 semanas hace

WooCommerce: agregue una segunda descripción en las páginas de categoría de producto

Aumente su SEO con una segunda descripción de woocommerce debajo la lista de productos en…

4 semanas hace