font

La propiedad font permite establecer de una sola vez los valores para todas las propiedades: font-style, font-variant, font-weight, font-size, line-height y font-family en una hoja de estilo.

Valor inicial	as each of the properties of the shorthand: font-style: normal font-variant: normal font-weight: normal font-stretch: normal font-size: medium line-height: normal font-family: depends on user agent
Applies to	all elements and text. It also applies to ::first-letter and ::first-line.
Heredable	yes
Percentages	as each of the properties of the shorthand: font-size: refer to the parent element's font size line-height: refer to the font size of the element itself
Valor calculado	as each of the properties of the shorthand: font-style: como se especifica font-variant: como se especifica font-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real value font-stretch: como se especifica font-size: as specified, but with relative lengths converted into absolute lengths line-height: for percentage and length values, the absolute length, otherwise as specified font-family: como se especifica
Animation type	as each of the properties of the shorthand: font-style: by computed value type; normal animates as oblique 0deg font-variant: discrete font-weight: a font weight font-stretch: a font stretch font-size: a length line-height: either number or length font-family: discrete

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

font: inherit

La propiedad font establece los valores individuales tal como se especifica y a las otras su valor inicial.

Ver las propiedades individuales: font-style, font-variant, font-weight, font-size y font-family.

También se pueden especificar los tipos de letra del sistema usando la propiedad font,en lugar de tener que especificar cada propiedad individualmente:

caption

el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).

icon

el tipo de letra usado para etiquetar iconos.

menu

el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).

message-box

el tipo de letra usado en cajas de diálogo.

small-caption

el tipo de letra usado para etiquetar pequeños controles (small control).

status-bar

el tipo de letra usado en la barra de estado de la ventana.

Gecko implementa:

-moz-window, -moz-document, -moz-workspace, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field

Ver El Ejemplo Vivo

/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
p { font: 12pt/14pt sans-serif }

/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
p { font: 80% sans-serif }

/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
p { font: bold italic large serif }

Las partes font-size y font-family de font son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.

Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: normal. Las propiedades que se pueden omitir son: (font-style, font-variant, font-weight y line-height).

La propiedad font-size-adjust también se establece a su valor inicial (none) cuando se usa la propiedad general font.