Actualmente desde las hojas de estilo podemos controlar todos los atributos de las fuentes, tamaño, color, familia, espacios en blanco, saltos de línea, pero existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado.
Esto se hace a partir de la etiqueta <font> y su cierre correspondiente, </font>. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir. A continuación comento los atributos principales de esta etiqueta:
Resumen del Contenido
Atributo face
Define el tipo de letra, Arial, Times, Comic, Verdana, ….
Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman para Windows y Times para Mac que es distinta de la de Windows). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.
<font face="Comic Sans MS,Arial,Verdana">Este texto tiene otra tipografía>/font>
Que se visualizaría así en una página web.
Este texto tiene otra tipografía
La fuente que utilizamos en nuestra página web sólo se verá como se ve en nuestra pantalla si el internauta que visita nuestra página tiene el mismo tipo de fuente instalado en su PC.
- No podemos forzar al internauta a que descargue e instale una fuente, ni siquiera automáticamente.
- Tampoco sabemos los tipos de fuentes instaladas en la PC del internauta.
- Por ello, no podemos saber cómo nuestra página será vista en los navegadores.
Por lo tanto lo mejor es usar fuentes genéricas y definir otros tipos de fuentes alternativos (si es posible que sean similares a la que nos gusta). También podemos utilizar Google Fonts que nos ofrece una gran cantidad de tipografías diferentes.
Tenemos que seleccionar una fuente en la que podamos poner acentos, letras como la ñ, Ñ, … , y que se vean sin problemas en todos los navegadores. Estos caracteres tienen unos códigos HTML especiales para que tu página web se vea bien en todos los navegadores.
Ejemplo
Por ejemplo, si quisiéramos que nuestra página aparezca con la fuente Trebuchet MS». Entonces deberemos definir el tipo de fuente:
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
Poniendo «Trebuchet MS» en primer lugar, indicamos que deseamos que la página sea vista con esta fuente.
- Si el internauta tiene esta fuente, entonces él la verá en su pantalla con esta fuente.
- Si el internauta no tiene esta fuente, el navegador intentará con la siguiente fuente (Verdana, Arial…) hasta encontrar la que tenga.Por lo tanto lo mejor es usar fuentes genéricas y definir otros tipos de fuentes alternativos (si es posible que sean similares a la que nos gusta).
Las fuentes por defecto
Cada sistema operativo y navegador interpretan de distinta forma estas fuentes predeterminadas.
- serif: «Times New Roman» en Windows, y «Times» en Macintosh (diferente a la de Windows).
- sans serif: «Arial» en Windows, y «Helvetica» en Macintosh.
- monospace: «Courrier New» en Windows, «Courrier» en Macintosh, y por lo general «VeraSans» o «DejaVuSans» en Linux.
Así es como se verán estas fuentes en Windows (en Internet Explorer):
Lo mismo en Windows, pero con ClearType activado:
En MacOS X (en Safari):
En Linux (Ubuntu) (en Firefox):
Recomendaciones
Para las fuentes con serifa, debemos definir:
«Times New Roman», Times, serif;
Para las fuentes sin serifa:
Verdana, Arial, Helvetica, sans-serif;
(Verdana es más fácil de leer en la pantalla que Arial, incluso si existe controversia acerca del uso de esta fuente)
Para las fuentes con un espacio fijo:
«DejaVu Sans Mono»,»Bitstream Vera Sans Mono», monospace;
DejaVu y Vera son familias de fuentes opensource fáciles de leer y que permiten (contrariamente a Courrier) distinguir bien el 0 de la O y el 1 de la l.
De preferencia elegir éstas antes que Courrier.
(Se encuentran por defecto en la mayoría de distribuciones Linux recientes)
Si quieres puede ver las fuentes instaladas por defecto en windows en el siguiente enlace: http://www.wpdfd.com/editorial/xpfonts.htm
Atributo size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.
Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size=»1″ para la letra más pequeña o size=»7″ para la más grande.
<font size=4>Este texto es más grande, size=4</font>
Que se visualizaría así en una página web.
Este texto es más grande, size=4
Podemos asimismo modificar el tamaño de nuestra letra con respecto al del texto mostrado precedentemente definiendo el número de niveles que queremos subir o bajar en esta escala de tamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo como size=»+1″ lo que queremos decir es que aumentamos de un nivel el tamaño de la letra. Si estábamos escribiendo previamente en 3, pasaremos automáticamente a 4.
Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente puede ser definido en el Navegador yendo al menú superior, Ver/Tamaño de la fuente. Esta flexibilidad puede en más de una ocasión resultarnos embarazosa ya que en muchos casos desearemos que el tamaño del texto permanezca constante para que éste quepa en un determinado espacio. Veremos en su momento que esta prefijación del tamaño puede ser llevada a cabo por las hojas de estilo en cascada.
Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.
La paleta de colores RGB (Red – Green – Blue, en español: Rojo – Verde – Azul) está representada por tres pares hexadecimales, como ya hemos dicho, según el siguiente formato:
#RRGGBB
Los valores, para cada uno de los pares, van desde 00(0 decimal) a FF(255 decimal).
Cuanto mayor sea el valor del par, tanto mayor será la intensidad de color de ese par.
La escala cromática de intensidad de color es:
- mínima (nulo = 00)
- media (media = 80)
- máxima (saturado = FF)
Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo: Los colores y HTML.
Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico:
| Nombre | Valor hexadecimal | Descripción |
|---|---|---|
| Cyan | #00FFFF | |
| Gray | #808080 | |
| Navy | #000080 | |
| Silver | #C0C0C0 | |
| Black | #000000 | |
| Green | #008000 | |
| Olive | #808000 | |
| Teal | #008080 | |
| Blue | #0000FF | |
| Lime | #00FF00 | |
| Purple | #800080 | |
| White | #FFFFFF | |
| Fuchsia | #FF00FF | |
| Maroon | #800000 | |
| Red | #FF0000 | |
| Yellow | #FFFF00 |
<font color="red">Este texto está en rojo</font>
Que se visualizaría así en una página web.
Este texto está en rojo
Con todo esto estamos ya en disposición de crear un texto formateado de una forma realmente elaborada.
Pongamos pues en practica todo lo que hemos aprendido haciendo un ejercicio consistente en una página que tenga las siguientes características:
- Un titular con encabezado de nivel 1, en itálica y color verde oliva.
- Un segundo titular con encabezado de nivel 2, también de color verde oliva.
- Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo «Comic Sans MS» y en caso de que ésta no esté en el sistema que se coloque la fuente «Arial».
Se puede ver una posible solución del ejercicio en este enlace. (Ver el código fuente de la página para ver cómo lo hemos resuelto el problema)
<html> <head> <title>Home de la cocina para todos</title> </head> <body> <font color="Olive" face="Comic Sans MS,arial"> <h1 align="center"><i>Cocina para Todos</i></h1> <h2 align="center">La cocina tu alcance</h2> </font> <font face="Comic Sans MS,arial"> Descubre los platos más exquisitos, fáciles y económicos que puedas imaginar. <br> Dentro de este sitio podrás tener acceso a gran variedad de <b>recetas</b> de preparacion sencilla, aprenderás como realizar <b>operaciones comunes</b> dentro de una cocina y podras plantear tus preguntas en nuestro <b>consultorio</b> gourmet donde nuestro cocinero virtual podrá ayudarte con tus proyectos culinarios. También te será posible adquirir los <b>libros</b> gastronómicos más populares al precio més accesible... <br> Adéntrate en los misterios de la cocina sin quemar más cacerolas ni llamar al pizzero. </font> </body> </html>
