5.4 - Tamaño y Color de las fuentes de caracteres

Utilidad

     En el apartado anterior se vio el modo de definir los distintos títulos de documento, mediante cabeceras. Estas son poco flexibles y predeterminadas.

     Existe otra etiqueta HTML que permite una más sencilla adaptación del tamaño de las fuentes y permite además modificar su color.

     Con esta podremos incluir texto resaltado en medio de una frase, con las cabeceras no es posible ya que estas introducen automáticamente un salto de línea detrás, y permitirá incluir párrafos de distintos tamaños o colores, proporcionando una mayor versatilidad y pudiendo crear efectos más espectaculares.

     La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamaño y color del texto incluido entre la etiqueta de inicio y fin.

<FONT SIZE=n> : Tamaño de la fuente

     El atributo SIZE permite indicar el tamaño de la fuente, su valor puede estar entre 1 y 7. Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 que la fuente de mayor tamaño. El texto normal equivale a la fuente de tamaño 3, por tanto los valores menores que 3 serán fuentes más pequeñas que el texto normal y las mayores que 3 serán de mayor tamaño.

     El tamaño también puede indicarse de forma relativa, indicando el incremento o detrimento a partir de la fuente base. Por defecto la fuente base será 3, por tanto si se indica como valor +1 la fuente será de tamaño 4.

     Existe una etiqueta que redefine la fuente por defecto, esta etiqueta es: <BASEFONT SIZE ...>

     Los elementos de tamaño de fuentes pueden ser definidos para todo un documento, teniendo validez dentro de elementos tales como listas y formularios, pero no tendrán validez global en las tablas, debiendo definir cada una de las celdas al tamaño de fuente deseado.

Ejemplos de tamaños de fuentes

Inst. HTMLMuestraExplicación
<FONT SIZE=2>Muestra</FONT>MuestraObtendriamos en este caso texto de tamaño de fuente 2
<FONT SIZE=6>Muestra</FONT>MuestraEste texto es de tamaño de fuente 6
<FONT SIZE=-1>Muestra</FONT>MuestraObtendriamos también en este caso texto de tamaño de fuente 2, pero lo definiríamos de forma relativa: 3-1=2
<FONT SIZE=+2>Muestra</FONT>MuestraAsí definiríamos fuente de tamaño 6 de forma relativa: 3+2=5
<FONT SIZE=6> Muestra <FONT SIZE=1> Muestra </FONT> Muestra </FONT>Muestra Muestra Muestra Se pueden combinar en una misma frase varios tamaños de fuentes
<FONT SIZE=4> Muestra <B> <I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra </B> </FONT>Muestra Muestra Muestra Se pueden combinar con elementos de resalte e hiperenlaces

<BASEFONT SIZE=n> : Fuente por defecto

     Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuente relativos.

     Esta etiqueta no define el tamaño de la fuente por defecto, para el texto normal, y solo se usa para cálculos de tamaño de fuente relativos. La utilidad no es muy amplia, y se podría utilizar cuando en un documento en el que todos los tamaños estén definidos de forma relativa y se desee cambiar de forma global el tamaño de las fuentes.

     Si no incluye esta etiqueta el valor base para estos cálculos es 3, con esta se puede variar, como se ve en el ejemplo.

Inst. HTMLMuestraExplicación
<FONT SIZE=-2>Muestra</FONT>

<BASEFONT SIZE=5>

<FONT SIZE=-2>Muestra</FONT>

Muestra MuestraEl nuevo valor para el calculo del tamaño relativo será 6, notándose el efecto en el tamaño de las fuentes

<FONT COLOR=texto color ó rrvvaa> : Color de la fuente

     El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas de inicio y fin. Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versión 2.0 o superior.

     El modo de definir los colores es similar al explicado para los atributos de BODY, al que le remitimos si no le quedo claro.

     Este atributo puede ser definido de forma conjunta con el atributo SIZE, o de forma independiente, siendo atributos de la misma etiqueta. Si se define el atributo SIZE solo, el color del texto que define será el por defecto, si se define con la etiqueta COLOR solo, el tamaño será el de la fuente base.

     Al igual que en el caso del tamaño de la fuente pueden ser utilizados junto con otros elementos del lenguaje HTML como listas y formularios y pueden ser utilizados conjuntamente con los elementos de resalte

     El cambio de color no afectará al texto o elementos incluidos en un hiperenlace, utilizándose para estos el color por defecto definido en la etiqueta BODY.

Ejemplos de definición de colores de fuentes

     Algunos ejemplos de la definición de colores de fuente podrían ser:

Inst. HTMLMuestraExplicación
<FONT COLOR=FF00FF>Muestra</FONT>Muestra El texto se mostrará de un color lila, al mezclar los colores rojo y azul.
<FONT COLOR=AQUA>Muestra</FONT>Muestra También se puede utilizar uno de los colores predefinidos.
<FONT SIZE=5 COLOR=red> Muestra </FONT>MuestraSe puede combinar con el tamaño de fuente
<FONT COLOR=NAVY> Mue<FONT SIZE=4 COLOR=BLUE>str</FONT>a </FONT>Muestra Se pueden combinar varios colores en una misma frase o palabra.
<H3> <FONT COLOR=81426E> Mu<I>es</I>tra </FONT> </H3>

Muestra

Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos físicos y lógicos, etc ...