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:
- font-family: Familia de fuente
- font-size: tamaño de tu fuente
- font-style: negrita, cursiva, oblicua …
- font-variant: variante de fuente
- font-weight: tamaño de letra
- 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
