La propiedad font CSS

Font

La propiedad font representa la declaración abreviada de font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family.

Ejemplos:

  /* font-size: 12px; line-height: 14px; font-family: sans-serif;*/
  p { font: 12px/14px sans-serif }
  /* font-size: 80% del tamaño de fuente del elemento padre;  font-family: sans-serif;*/
  p { font: 80% sans-serif }
  /*Utiliza la misma fuente utilizada por la barra de estado de la ventana*/
  p { font: status-bar }

font-style

La propiedad font-style establece si el texto tiene que utilizar un tipo de fuente normal, cursiva u oblicua.

font-style: normal | italic | oblique | oblique 40deg;

Ejemplos:

.normal {
    font-style: normal;
  }
.italic {
    font-style: italic;
  }
.oblique {
    font-style: oblique;

Si font-style: italic el tipo de fuente utilizada es cursiva mientras que si font-style: oblique el tipo de fuente utilizado es una versión inclinada de fuentes regulares.
Dependiendo del valor utilizado el navegador busca el tipo de letra adecuado. Si no lo encuentra ( porque la familia de fuentes utilizada no tiene un tipo de fuente cursiva o inclinada ) el navegador prueba simularlo sesgando la fuente.

Podemos desactivar esta funcionalidad utilizando la propiedad font-synthesis:

  font-synthesis: none; /* el navegador no permite sintetizar ningún tipo de fuente */
  font-synthesis: style; /* fuentes en cursiva pueden ser sintetizadas si necesario */
  font-synthesis: weight; /* fuentes en negrita pueden ser sintetizadas si necesario */
  font-synthesis: weight style; /* pueden sintetizarse tanto fuentes en cursiva como fuentes en negrita */

font-variant

En 99% de los casos la propiedad font-variant se emplea para decidir si utilizar o no una variante de fuente small-caps donde las minúsculas se parecen a las mayúsculas.

font-variant: normal | small-caps | inherit;

En CSS3 el significado de font-variant fue ampliado. Ahora la propiedad font-variant representa la declaración abreviada de font-variant-ligatures, font-variant-position, font-variant-caps, font-variant-numeric, font-variant-alternates.

font-variant: small-caps;

font-weight

La propiedad font-weight especifica el grosor o el peso de la fuente.

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;

Esta es la teoría. En realidad las fuentes que utilizamos pueden no tener estos grosores. Si la fuente utilizada no tiene el grosor especificado el navegador selecciona al tipo que más se le parece.

Ejemplos:

  /* palabras clave – valores absolutas */
  font-weight: normal;
  font-weight: bold;
  /* palabras clave – valores relativas */
  font-weight: lighter;/* más ligera que la fuente del elemento padre*/
  font-weight: bolder;/* más pesada que la fuente del elemento padre*/
  /* valores numéricos */
  font-weight: 200;
  font-weight: 600;

font-stretch

La propiedad font-stretch escoge un tipo de fuente normal, condensado o ampliado.

font-stretch: porcentaje | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;

Si la fuente utilizada no tiene el tipo de fuente especificado la propiedad font-stretch no tendrá ningún efecto.

Ejemplos:

   /* palabras clave */
  font-stretch: condensed;
  font-stretch: normal;
  font-stretch: expanded;
  /* porcentajes */
  font-stretch: 50%;
  font-stretch: 100%;
  font-stretch: 200%;

font-size

La propiedad font-size establece el tamaño de fuente.

font-size: tamaño | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller

El tamaño de fuente puede ser establecido con palabras clave o utilizando unidades de longitud como px, em, rem etc...

Ejemplos:

  /* palabras clave – valores absolutas */
  font-size: small; /* pequeña*/
  font-size: medium; /*mediana*/
  font-size: large; /*grande*/ 
  /* palabras clave – valores relativas */
  font-size: smaller; /*más pequeño*/
  font-size: larger; /*más grande*/ 
  /* unidades de longitud */
  font-size: 12px;
  font-size: 0.8em;
  /* porcentajes */
  font-size: 80%;

line-height

la propiedad line-height se utiliza para establecer la altura de línea del texto.

line-height: normal | número | longitud | porcentaje

Ejemplos:

  /* palabra clave */
  line-height: normal;
  /* valores sin unidades: 
  utilice este número multiplicado por el tamaño de fuente */
  line-height: 3.5;
  /* unidades de longitud */
  line-height: 3em;
  /* porcentajes */
  line-height: 34%;

font-family

La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado.

Ejemplos:

  /*dos familias de fuente más una fuente genérica: monospace */
  font-family: Courier, "Lucida Console", monospace;
  /*fuentes genericas*/
  font-family: serif;
  font-family: sans-serif;

Las fuentes genéricas definidas como serif, sans-serif, cursive, fantasy, y monospace son fuentes alternativas utilizadas en el caso en cual las otras fuentes fallan.

Si el nombre de fuente contiene espacios, hay que poner el nombre de fuente entre comillas: "Lucida Console".
Ojo: No hay que poner las fuentes genéricas entre comillas ya que se trata de palabras clave.

La propiedad font-size-adjust

La propiedad font-size-adjust ajusta la proporción de la fuente.

font-size-adjust: tamaño | none | inherit;

Ejemplo:

.elemento {
  font-size: 22px;
  font-size-adjust: .5;
}

Todas las fuentes tienen la misma proporción ( aspect ratio ) que se calculada utilizando esta fórmula:

proporción = x-height / font-size

Donde x-height representa la altura de los caracteres en minúscula.
No todas las fuentes tienen la misma proporción y por esto fuentes que tienen el mismo tamaño font-size pueden aparecer más grandes o más pequeñas. Para que esto no pase podemos utilizar la propiedad font-size-adjust para ajustar la proporción de la fuente.

A continuación una lista de fuentes y su proporción:

Font	Proporción
Arial	0.52
Comic Sans	0.53
Courier	0.43
Courier New	0.42
Georgia	0.48
Helvetica	0.52
Tahoma	0.55
Times New Roman	0.45
Verdana	0.58