Propiedad font

DefiniciónEstablece algunas o todas las propiedades tipográficas
Valores
permitidos
La explicación de los valores permitidos para esta propiedad es muy compleja debido a su gran flexibilidad. Existen tres opciones diferentes para establecer el valor o valores de esta propiedad:
  1. Opcionalmente, uno, dos o tres de los siguientes valores y en cualquier orden: Seguido por:
  2. Uno y sólo uno de los siguientes valores:
    • caption
    • icon
    • menu
    • message-box
    • small-caption
    • status-bar
  3. inherit
Si se utilizan porcentajes, cada propiedad define el valor al que hace referencia
Valor inicialCada propiedad define su propio valor por defecto
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/fonts.html#propdef-font

Ejemplos de uso

La propiedad font permite establecer algunas o todas las propiedades tipográficas del texto de forma simultánea. Por este motivo, font es una de las propiedades abreviadas que se conocen con el nombre de "propiedades shorthand".

Los dos únicos valores que se deben incluir obligatoriamente al utilizar la propiedad font son el tamaño y el tipo de letra:

body {
  font: 1.5em Arial, Helvetica, sans-serif;
}

Si se omite el tamaño o el tipo de letra o si se intercambia su posición, la declaración de la propiedad font es incorrecta y se ignora su valor:

font: 1.5em;             // Incorrecto: falta el tipo de letra
font: sans-serif;        // Incorrecto: falta el tamaño de letra
font: sans-serif 1.5em;  // Incorrecto: primero se indica el tamaño

La propiedad font también permite indicar de forma opcional el interlineado (propiedad line-height) justo después del tamaño de letra y separado por una barra inclinada (/):

body {
  font: 1.5em/2 Arial, Helvetica, sans-serif;
}
 
p {
  font: 13pt/1.5em Arial, Helvetica, sans-serif;
}

El resto de propiedades tipográficas también son opcionales y se pueden indicar alguna o todas a la vez y en cualquier orden, pero siempre antes que el tamaño de letra:

font: italic 1.5em sans-serif;
font: small-caps 1.5em sans-serif;
font: bold 1.5em sans-serif;
 
font: 700 small-caps 1.5em sans-serif;
font: small-caps oblique bolder 1.5em sans-serif;
font: oblique 200 1.5em sans-serif;
font: normal italic 1.5em sans-serif;

Si no se define el valor de alguna propiedad tipográfica, el navegador le asigna su valor por defecto. Si se definen todas las propiedades tipográficas a la vez, la declaración resultante puede llegar a ser muy compleja:

font: italic small-caps bold 1.5em/2 sans-serif;
font: 700 normal 12pt/1.3 sans-serif;
font: oblique lighter 85%/120% sans-serif;

Además de las propiedades tipográficas individuales, la propiedad font define una serie de palabras clave para establecer de forma directa todas las propiedades tipográficas del texto. Estas palabras clave indican que el texto debe mostrarse con el mismo aspecto que algunos elementos del sistema operativo del usuario:

Palabra clave Elementos del Sistema Operativo a los que hace referencia
caption Controles y campos de formulario (botones, listas desplegables, etc)
icon Texto mostrado debajo de cada icono
menu Menús desplegables y otros tipos de menús
message-box Cuadros de diálogo (ventanas con mensajes de error, información, advertencia, etc.)
small-caption Controles y campos de formulario más pequeños
status-bar Barra de estado de las ventanas

Los elementos de la tabla anterior siempre hacen referencia a los elementos del sistema operativo del usuario, por lo que no tienen nada que ver con el navegador o aplicación utilizada para acceder a los contenidos.

Si en el sistema operativo utilizado no está definido alguno de los valores, los navegadores lo sustituyen por otros valores similares o utilizan directamente las propiedades tipográficas por defecto.

A continuación se muestra el aspecto del texto definido con cada palabra clave de la propiedad font. Si visualizas esta página con diferentes sistemas operativos o modificas el aspecto del tema que utilizas en tu sistema operativo, el texto variará su aspecto:

<p style="font: caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="font: icon">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="font: menu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="font: message-box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="font: small-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="font: status-bar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

A pesar de su sencillez y de que el texto cuyo aspecto se define con las palabras clave parece más integrado con el sistema operativo del usuario, en la práctica apenas se utilizan estas palabras y casi siempre se opta por definir manualmente las propiedades tipográficas del texto.

Por último, recuerda que la propiedad font permite establecer todas las propiedades tipográficas del texto salvo su color, que se define de forma independiente mediante la propiedad color.

El uso de propiedades abreviadas como font no sólo hace más breve el código CSS, sino que demuestra que se tienen conocimientos avanzados de CSS.