• Propiedades de las fuentes
• Ejemplos

Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su grosor, etc.

Las propiedades que podemos utilizar son las siguientes:

font-family

Indicamos la familia de la fuente a utilizar. Sus posibles valores son los nombres de las fuentes, pudiendo especificar un conjunto de familias. Se selecciona la primera que se encuentra en el sistema. Se hereda.

nombre de las familias de las fuentes | familia genérica

BODY { font-family: Verdana, Arial, Helvetica, sans-serif}

En el ejemplo anterior estamos diciendo que todo el contenido de la página este en Verdana, y que en caso de que no este instalada utilice Arial y si no Helvetica y si no el tipo de familia genérica sans-serif.

font-style

Especifica el estilo de la fuente, es decir, si los caracteres iran en normal, en itálica (cursiva) o en oblicua (un poco más inclinada que la itálica). Se hereda.

normal | italic | oblique

H1, H2, H3{font-style: italic} H1,EM{font-style: normal}

En este ejemplo estamos indicando que las cabeceras de hasta nivel 3 iran en itálica. Pero que el texto emfatizado de las cabeceras de nivel 1 iran en normal.

font-variant

Especifica la variante de la fuente, es decir, si los caracteres serán tomados de la fuente normal o de small-caps (o versalitas, donde las minúsculas son parecidas a las mayusculas pero de menor tamaño) dentro de una familia de fuentes. Se hereda.

normal | small-caps

font-weight

Especifica el peso, densidad o grosor (cantidad de espacio ocupado en relación con el rectángulo en que se inscribe el carácter) de la fuente de caracteres dentro de una família de fuentes, con valores entre 100 y 900 siendo cada vez más densos. El valor 400 equivale a normal, y el 700 a bold.

El valor bolder indica que los caracteres deben ser más densos que el valor heredado excepto en el que caso de que ya valga 900.

El valor lighter funciona a la inversa de bolder indicando que tiene que ser de menos densidad excepto en el caso de que ya valga 100.

Esta propiedad se hereda.

lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900

STRONG {font-weight: bolder}

font-size

Especifica el tamaño de la fuente. Se hereda.

Puede ponerse como una longitud en unidades (absoluta o relativa), aunque también admite palabras reservadas que indican tamaños absolutos predefinidos (de menor a mayor xx-small, x-small, small, medium, large, x-large, xx-large).

Los valores larger y smaller especifican un tamaño, en relación con los anteriores, respectivamente un grado mayor o menor que el heredado.

Para facilitar el funcionamiento en cascada, es conveniente utilizar longitudes relativas (como em) o porcentajes.

XX units | % | larger | smaller | xx-small | x-small | medium | large | x-large | xx-large

 Ejemplos

He creado una página ccon citas de Groucho Marx a modo de ejemplo de como se pueden utilizar las propiedades de las fuentes.