w3.unpo<code>todo

  /* 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 }

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

  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 */

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.

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.

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.

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.

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.

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: