font
====

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:* `font-style`: `normal`
* `font-variant`: `normal`
* `font-weight`: `normal`
* `font-stretch` (en-US): `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` (en-US): 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` (en-US): a font stretch
* `font-size`: a length
* `line-height`: either number or length
* `font-family`: discrete
 |

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.

Gecko implementa:

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

Ejemplos
--------

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 }
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop |

### Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.