Resumen
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:
|
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Heredable | yes |
| Percentages | as each of the properties of the shorthand:
|
| Media | visual |
| Valor calculado | as each of the properties of the shorthand:
|
| Animatable | as each of the properties of the shorthand:
|
| Canonical order | order of appearance in the formal grammar of the values |
Sintaxis
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
Valores
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.
- -moz-window
- -moz-document
- -moz-workspace
- -moz-desktop
- -moz-info
- -moz-dialog
- -moz-button
- -moz-pull-down-menu
- -moz-list
- -moz-field
Ejemplos
/* 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 }
Notas
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.
Especificaciones
- CSS 1
- CSS 2 (para
font-size-adjust) - CSS 2.1
- css3-ui (para los nuevos valores de fuentes de sistema])
Compatibilidades
| Navegador | Versión mínima |
|---|---|
| Internet Explorer | 3 |
| Netscape | 4 |
| Opera | 3.5 |