Características font en CSS

La propiedad font en CSS es un atajo que permite ajustar los valores de las propiedades font-style, font-variant, font-weight, font-size, line-height y font-family, para determinar la fuente utilizada en el elemento.

Funciones font css

/* size | family */
font: 2em "Open Sans", sans-serif;
/* style | size | family */
font: italic 2em "Open Sans", sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;
/* Fuente utilizada en el sistema operativo */ 
font :  message-box ; 
font :  icono ;
/* Valores globales */ 
font: inherit;
font: initial;
font: unset;

Al igual que con todas las propiedades de acceso directo, la propiedad font establece los valores de todas las propiedades que puede establecer, incluso si no especificamos un valor para esas propiedades, porque las establecerá en sus valores iniciales.

Tenga en cuenta que las propiedades font-stretch, font-size-adjust y font-kerning no se establecerán mediante la propiedad abreviada font, pero harán que sus valores se restablezcan a sus valores iniciales.

Valor inicial	Para cada valor corto: `font-style`: `normal` `font-variant`: `normal` `font-weight`: `normal` `font-stretch`: `normal` `font-size`: `medium` `line-height`: `normal` `font-family`: depende del navegador.
Aplicado a	Todos los artículos.
Heredable	Sí
Móvil	Consulte las páginas de funciones que abrevia esta función.
Valor calculado	Para cada valor corto: `font-style`: Como se especificó. `font-variant`: Como se especificó. `font-weight`: La palabra reservada o el valor numérico especificado, excepto `bolder` y `lighter` si se convierten en valores reales. `font-stretch`: Como se especificó. `font-size`: Cómo se especifica, pero con la conversión de longitudes relativas a longitudes absolutas. `line-height`: Cómo se especifica, excepto para los valores relativos que se convertirán a longitudes absolutas. `font-family`: Como se especificó.

Ejemplos y aplicaciones en código

Establezca tamaño de fuente ( font-size) en 15px, altura de fuente ( line-height) en 18px y tipo de fuente ( font-family) en sans-serif:

p { font: 15px/18px sans-serif; }

Establezca el tamaño de fuente ( font-size) a 80% partir del tamaño de fuente del elemento principal (o el valor predeterminado si no hay ningún elemento principal), y establezca el tipo de fuente ( font-family) a sans-serif:

p { font: 80% sans-serif; }

Establezca peso de fuente ( font-weight) en bold(Negrita), formato de fuente ( font-style) en italic(Cursiva), tamaño de fuente ( font-size) en large(Grande) y tipo de fuente ( font-family) en serif:

p { font: bold italic large serif; }

Configure la fuente del elemento como la fuente de la barra de estado utilizada en el sistema operativo:

p { font: status-bar; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	1.0	1.0	3.0	3.5	1.0
Fuentes del sistema	1.0	1.0	4.0	6.0	1.0
Establecer el valor de font-stretch	soportado	43	؟?	؟?	؟?

Características generales

El valor de la propiedad se puede especificar fontcomo una palabra reservada, que seleccionará una fuente de las fuentes utilizadas por el sistema, o como una propiedad abreviada para una serie de propiedades relacionadas con la fuente.

Si el valor de la propiedad se especifica fontcomo una palabra reservada, debe ser uno de los siguientes: captiono icon, menuo message-box, small-captiono status-bar.

Si la propiedad de fuente se utiliza como propiedad abreviada para establecer varios valores relacionados con la fuente:

Debe incluir dos valores:
- <font-size>
- <font-family>
Opcionalmente puede incluir los valores:
- <font-style>
- <font-variant>
- <font-weight>
- <line-height>
Debe preceder a los valores de las propiedades font-style, font-variant y font-weight propiedad font-size.
El valor de la propiedad solo puede aceptar font-variant palabras reservadas definidas en CSS 2.1, a saber normal y small-caps.
Un valor debe especificarse inmediatamente line-height después de un valor font-size, precedido por una barra /, como sigue: 16px/3.
El valor debe ser el font-family último valor especificado.

<font-style>

Vea la página de características font-style.

<font-variant>

Vea la página de características font-variant.

<font-weight>

Consulte la página de características font-weight.

<font-stretch>

Vea la página de características font-stretch.

<font-size>

Vea la página de características font-size.

<font-height>

Consulte la página de características font-height.

<font-family>

Vea la página de características font-family.

caption

La fuente utilizada en el sistema operativo para mostrar pancartas para los controles (como botones, menús desplegables, etc.)

icon

La fuente utilizada en el sistema operativo para mostrar los banners de iconos.

message-box

La fuente utilizada en el sistema operativo para mostrar cuadros de diálogo.

small-caption

La fuente utilizada en el sistema operativo para mostrar pancartas para controles pequeños.

status-bar

La fuente utilizada en el sistema operativo para mostrar el socio de estado en la parte inferior de las ventanas.

Estructura font css

font: [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] 
| caption | icon | menu | message-box | small-caption | status-bar;

dónde:

<font-variant-css21> = [ normal | small-caps ]

Consulte también

Las páginas de sub-propiedades de la propiedad de fuente son: font-style, font-weight, font-size y line-height.
La página de propiedades color que establece el valor de color de los elementos.