Nota: esta página está relacionada con el cambio de tipo de fuente, tamaño y color en una página web. Para Microsoft Word, consulte nuestra página sobre cómo cambiar el color, el tamaño o el tipo de letra en Word.

Este documento contiene instrucciones sobre cómo cambiar una fuente y su color en una página web. La sintaxis adecuada para avanzar es utilizar hojas de estilo en cascada junto con los selectores de clase o ID en lugar de un atributo de estilo en línea o etiqueta de fuente, que están en desuso. Aunque, vale la pena señalar que estos dos métodos aún funcionan con la mayoría de los navegadores de Internet.

Para continuar, seleccione el método del que desea aprender o lea cada sección.

Si planea cambiar la fuente y el color solo una vez en una página web, debe cambiar sus atributos en la etiqueta del elemento. Usando el atributo de estilo, puede especificar la fuente y el color de la fuente con la familia de fuentes, el color y el tamaño de la fuente con el tamaño de fuente, como se muestra en el siguiente ejemplo.

Código de ejemplo

Este texto tiene la fuente Courier, es azul, y 20px.

Resultado

Este texto tiene la fuente Courier, es azul y tiene un tamaño de 20 px.

Usando CSS para una o más páginas

Fuente personalizada para una página

En la parte superior de su página web, puede insertar código entre las pestañas para cambiar la apariencia de su texto en varios elementos. El siguiente cuadro azul contiene código de ejemplo que, una vez llamado, cambiaría la fuente de la fuente a Courier y lo colorearía de rojo. Como puede ver, hemos definido el nombre de la clase como "personalizado".

 .custom {font-family: Courier; color rojo; tamaño de letra: 20px; } 

Una vez definido, este estilo se puede aplicar a la mayoría de los elementos de su página adjuntando la clase "personalizada" a ellos. El siguiente cuadro muestra dos líneas de código y sus respectivos resultados.

Ejemplo

Toda esta frase es roja y mensajero.

Solo la palabra TEST es roja y Courier.

Resultado

Toda esta frase es roja y mensajero.

Solo la palabra TEST es roja y Courier.

Fuente personalizada para muchas páginas

Importar un archivo CSS externo puede ser muy beneficioso, ya que permite a los usuarios cambiar las reglas de varias páginas al mismo tiempo. La siguiente sección muestra un ejemplo para crear un archivo CSS básico que cambia la fuente y su color para la mayoría de los elementos. Este archivo puede cargarse en más de una página web, incluso en un sitio completo.

Usando cualquier editor de texto básico, guardar el siguiente texto como un archivo .css lo preparará para la importación.

 @charset "utf-8";
.courier {font-family: Courier; color: # 005CB9; } 

Una vez que el texto anterior se haya colocado en un archivo .css (hemos denominado ours basic.css ), puede vincularlo desde cualquier otra página utilizando una línea similar al siguiente ejemplo.

Consejo: Los usuarios pueden cambiar los atributos de los elementos en una página cambiando el código en el archivo .css importado.

Solución de etiqueta de fuente

Aunque está en desuso, la etiqueta HTML aún puede usarse y puede ser necesaria para ser usada con algunos servicios en línea. Al usar la etiqueta FONT, debe incluir el atributo de cara, que describe la fuente que se usará. En el siguiente ejemplo, estamos usando la fuente Courier y el código de color hexadecimal # 005CB9, que es un azul oscuro.

Código de ejemplo

 Un ejemplo de fuente especial. 

Resultado