3.2.Tipos de fuentes y sus colores

La etiqueta vista anteriormente <FONT> admite atributos para controlar el tipo de fuente a usar, así como su color. Sus nombres son FACE y COLOR, respectivamente.

Los colores se consiguen mezclando el rojo, verde y azul (RGB). Deben escribirse en hexadecimal, entre comillas y con el símbolo de rejilla (#) delante. Si se desea uno de los colores estándares, puede escribirse directamente su nombre.

La tabla de 16 colores que ofrecen muchos procesadores de texto es la que sigue, pero pueden hacerse todas las combinaciones que se deseen:

Negro Black #000000 Esto está escrito en color negro
Azul Blue #0000FF Esto está escrito en color Azul
Aguamarina Cyan #00FFFF Esto está escrito en color Aguamarina
Verde claro Lime #00FF00 Esto está escrito en color Verde claro (lima)
Magenta (fucsia) Magenta #FF00FF Esto está escrito en color Magenta (fucsia)
Rojo Red #FF0000 Esto está escrito en color Rojo
Amarillo Yellow #FFFF00 Esto está escrito en color Amarillo
Blanco White #FFFFFF Esto está escrito en color Blanco
Azul marino Navy #000080 Esto está escrito en color Azul marino
Verde azul (turquesa) Teal #008080 Esto está escrito en color Verde Azul (turquesa)
Verde Green #008000 Esto está escrito en color Verde
Púrpura Purple #800080 Esto está escrito en color Púrpura
Marrón (granate) Maroon #800000 Esto está escrito en color Marrón (granate)
Oliva Olive #808000 Esto está escrito en color Oliva
Gris Gray #808080 Esto está escrito en color Gris
Plata Silver #C0C0C0 Esto está escrito en color Plata

Por ejemplo, estas dos series de órdenes hacen exactamente lo mismo:

    <FONT FACE="arial" COLOR="blue"> El tipo de letra es arial, de color azul </FONT>

    <FONT FACE="arial" COLOR="#0000FF"> El tipo de letra es arial, de color azul </FONT>

Puede verse aquí una relación más detallada de los colores RGB.

Podemos escribir un ejemplo para visualizar algunos colores y tipos de fuente:

    <!-- Ejemplo 5: colores y tipos de fuentes -->
    <HTML>
    <HEAD>
    <TITLE>Ejemplo 5: colores y tipos de fuentes</TITLE>
    </HEAD>
    <BODY>
    <P>
    <FONT FACE="arial" SIZE=5 COLOR="blue">
    Texto en Arial de color azul, tamaño 5.
    </FONT>
    <P>
    <FONT FACE="times new roman" SIZE=5 COLOR="#FF00FF">
    Texto en Times New Roman, de color magenta, tamaño 5.
    </FONT>
    <P>
    <FONT FACE="arial" SIZE=3 COLOR="green">
    Texto en Arial, de color verde, tamaño 3.
    </FONT>
    <P>
    <FONT FACE="times new roman" SIZE=3 COLOR="#00FFFF">
    Texto en Times New Roman, de color Cyan, tamaño 3.
    </FONT>
    <P>
    <FONT SIZE=6 COLOR="#800000">
    Texto en Times New Roman (por defecto), de color marrón, tamaño 6.
    </FONT>
    <P>
    <FONT FACE="arial" SIZE=7 COLOR="purple"> <CENTER>
    Texto en Arial, de color púrpura, tamaño máximo (7)
    </CENTER></FONT>
    <HR>
    </BODY>
    </HTML>

Debe escribirse en un procesador de texto cualquiera (puede copiarse directamente desde aquí), grabarlo con el nombre que se quiera, sin formato (texto puro), con la extensión HTM, y leerlo luego con un navegador. Se observará claramente la diferencia que hay entre el código fuente y lo que luego aparece realmente en la pantalla. Si se desea comprobar el resultado, puede hacerse aquí.