Propiedades de las Fuentes

CSS1 define las propiedades 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', y 'font'.

La posibilidad de manejar las fuentes es una de las mas apreciadas en las "hojas de estilo"; pero recuerda ...

• Existen diferencias en el modo en que los navegadores interpretan las reglas de estilo. Este es un principio general que tambien, por desgracia, se aplica a las reglas de estilo relativas a las fuentes.
• Existen muchas diferencias entre los valores que admite un tipo de fuente u otro. Por ejemplo: veremos que se pueden especificar hasta nueve valores de negrita o bold , pero muchas fuentes estan diseñadas de tal forma que solo permiten ser visualizadas en dos valores: normal o negrita.
• De nada sirve que especifiquemos una fuente especial, y maravillosa, si el usuario no la tiene instalada en su ordenador.

'font-family'

Valor: a esta propiedad pueden asignarsele como valores una lista jerárquica de tipos de letra específicos o genéricos. Los valores deben ir separados por comas, para indicar que son alternativos:

body { font-family: verdana, helvetica, "sans-serif"; }

Lo usual es especificar como valor primero los tipos de letra de elección del autor y dejar como última alternativa una "familia genérica".

Hay cinco familias genericas de fuentes. Enumeramos los nombres de estas familias, y entre paréntesis un ejemplo de fuente perteneciente a la misma: serif (Times), sans-serif (Arial, Helvetica), cursive (Comic Sans), fantasy (Ransom) y monospace (Courier).

Dentro de cada familia, la elección del tipo específico dependerá de los tipos que el ordenador tenga instalados, pero usando como última elección una 'familia generica' aseguras al menos que el documento se visualizará con una fuente semejante (de la misma familia) que la designada. Ejemplo

Los nombres de fuentes que contengan espacios en blanco deben especificarse entre comillas. 

Si se omiten las comillas, el navegador ignorará los espacios en blanco antes y despues del nombre de fuente, y cualquier número de espacios en blanco "dentro" del nombre de fuente se convertirá en un solo espacio. 
Si la fuente se define in line, deben usarse comillas simples:

 style = "font-family: 'gill sans', arial;"> texto ... 

'font-style'

Este es un texto en italic y sin embargo este otro es oblique

La propiedad 'font-style' permite elegir como valor un tipo de fuente normal , italic o oblique . El valor normal visualiza una letra normal. El valor italic visualiza letra en cursiva . El valor oblique visualiza una fuente aún mas inclinada que la cursiva. La diferencia entre italic y oblique pasará desapercibida en la mayor parte de las fuentes.
Típicas fuentes oblique son "oblique", "slanted" o "incline"; etiquetadas como italic, "italic", "cursive" o "kursiv".

h1, h2, h3 { font-style: italic; }

h1 em { font-style: normal; }

'font-variant'

valores: "normal", o "small-caps". Estas últimas son letras mayúsculas de un tamaño mas pequeño que el normal. Si el tipo de fuente seleccionado no tiene versión smalls-caps, el navegador visualizará el texto en mayúsculas ordinarias. Ejemplo:

h3 { font-variant: small-caps; }

Y ahora un ejemplo: esto debería verse en small-caps y esto EN MAYUSCULAS NORMALES.

'font-weight'

Valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
El valor 'font-weight' determina el grosor de la fuente. Los valores 100 a 900 indican una secuencia jerárquica, donde cada número indica un grosor secuencialmente mas oscuro como su predecesor. El valor "normal" equivale a 400. 'Bold' equivale a 700.

p { font-weight: normal; } /* 400 */
h1 { font-weight: 700; } /* bold */

Este texto tiene un valor 200

Este es un texto normal;

Este es texto weight 700 o 'bold';

Este tiene un valor 900.

Los anteriores son valores absolutos; junto a ellos tenemos dos valores relativos: 'bolder' y 'lighter' seleccionan grosores de fuente mayores o menores en relación al grosor "heredado" del elemento del que dependen.

No existe certeza sobre el grosor exacto con que un navegador determinado puede visualizar una fuente. Por ejemplo, algunas fuentes solo admiten dos valores (normal y bold).

'font-size'

La propiedad font-size determina el tamaño de la fuente. Los valores pueden especificarse

• de forma absoluta
• de forma relativa
• en porcentaje
• expresando su unidad de medida

de forma absoluta

Al especificar el tamaño de la fuente en valores absolutos, el autor de la página se remite a la tabla de tamaños de fuentes predeterminados en la base de datos del ordenador del usuario. Son valores admisibles xx-small, x-small, small, medium, large, x-large, y xx-large .

Medium es el tamaño de fuente por defecto, y cada uno de los valores absolutos supone un incremento o disminución de tamaño en un valor constante. Este valor constante de aumento o disminución de tamaño, segun la especificación CSS1, es de 1.5; sin embargo, en el standard CSS2 es de 1.2.; algunas familias de fuentes tienen un incremento o disminución de tamaño segun un valor propio; y finalmente los navegadores pueden ofrecer un tratamiento del tamaño distinto del especificado. Pero en cualquier caso, los diferentes valores absolutos siempre respetarán sus proporciones entre ellos. Una fuente x-large será siempre mas grande que una fuente large. Un ejemplo:

xx-large

x-large

large

medium

small

x-small

xx-small

A título de ejemplo, font-size 'x-large' se visualiza con tamaño equivalente a 28 puntos en Communicator (Windows o Macintosh), a 24 puntos en el IE 4 (Windows y Macintosh), y 18 puntos en el IE 3.0 para Windows 95.

de forma relativa

La segunda forma de especificar el tamaño de la fuente es usando valores relativos. Los valores admitidos son smaller o larger, y hacen la fuente mas pequeña o mas grande comparada con el valor que tenía inicialmente. Si la fuente venía definida por un valor absoluto, el empleo de un valor relativo hace que el valor absoluto se incremente o decrezca un grado: si la fuente tenía un tamaño large, dandole un valor relativo smaller pasa a ser el equivalente a medium. Si el valor inicial no está expresado de forma absoluta, la expresión de un valor relativo smaller o larger empequeñece o engradece la letra a criterio del navegador. Ejemplos:

xx-large

smaller

smaller

smaller

smaller

smaller

smaller

larger

larger

larger

larger

larger

larger

larger

El ejemplo comienza con un valor absoluto xx-large; se reduce seis veces asignando sucesivamente el valor relativo smaller (la última linea smaller es teóricamente equivalente a xx-small) y luego se incrementa con el valor relativo larger siete veces, lo que determina que la última orden visualice la letra a un tamaño mas grande que xx-large. ATENCION: se advierte que Netscape Navigator visualizaba en sus anteriores versiones la fuente larger verdaderamente grande ....

En porcentaje

La expresión del tamaño de fuente en porcentaje funciona de forma similar al tamaño relativo. Cada valor en porcentaje visualiza la fuente en un tamaño superior o inferior porcentualmente al valor inicial, de la siguiente forma:

Double Normal Half.

En este caso a la primera palabra hemos asignado un valor porcentual de 200% (doble) que el normal, y a la tercera un valor 50% (mitad). Para el ejemplo, el valor normal se ha definido de forma absoluta como x-large.

En unidades

Finalmente puede designarse el tamaño de la fuente con su valor en unidades: cm, in, pt, px. 

'font'

Valores: font-style, font-variant, font-weight, font-size, line-height, font-family.

La propiedad 'font' permite definir de forma agrupada valores para 'font-style' , 'font-variant' , 'font-weight', 'font-size', 'line-height' y 'font-family' en una sola regla. Es decir, ademas de las ya examinadas propiedades de las fuentes, line-height , que en realidad es una propiedad de texto y alude al espacio entre líneas, es decir, distancia entre la parte superior e inferior de las letras de dos lineas contiguas.
No es necesario especificar valores para todas las propiedades, sino solo para aquellas que se deseen cambiar.
Las propiedades grosor (weight), estilo (style) y variant se pueden especificar en cualquier orden; seguidas por el tamaño (size), seguidas por una barra o slash "/" y la altura de linea (line-height), seguidas por la familia (family).
asi,

p { font: italic bold 12pt/14pt Times, serif; }

especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y una distancia entre líneas (o altura de linea) de 14 puntos.