Ejemplo
Especificar todas las propiedades de la fuente en una declaración:
p.ex1
{
font: 15px arial, sans-serif;
}
p.ex2
{
font: italic bold 12px/30px Georgia, serif;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad abreviada fuente establece todas las propiedades de la fuente en una declaración.
Las propiedades que se pueden establecer, son (in order) : "font-style font-variant font-weight font-size/line-height font-family"
Se requieren los valores de tamaño de fuente y la fuente-familia. Si uno de los demás valores están desaparecidos, se insertarán los valores por defecto, si los hubiere.
Note: La propiedad line-height establece el espacio entre las líneas.
| Valor por defecto: | The default value of all the font properties |
|---|---|
| Heredado: | yes |
| animatable: | yes, see individual properties . Read about animatable Try it |
| Versión: | CSS1 |
| la sintaxis de JavaScript: | object .style.font="italic small-caps bold 12px arial,sans-serif" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: Consulte la ayuda del navegador individual para cada valor por debajo.
sintaxis CSS
font:font-stylefont-variantfont-weightfont-size/line-height
font-family |caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;Valores de propiedad
| El valor de la propiedad | Descripción |
|---|---|
| font-style | Especifica el estilo de fuente. El valor por defecto es "normal" . Ver la fuente de estilo de posibles valores |
| font-variant | Especifica la variante de la fuente. El valor por defecto es "normal" . Ver font-variant de posibles valores |
| font-weight | Especifica el grosor de fuente. El valor por defecto es "normal" . Ver font-weight para posibles valores |
| font-size/line-height | Especifica el tamaño de la fuente y de la línea de altura. El valor por defecto es "normal" . Ver tamaño de fuente y la línea de altura de posibles valores |
| font-family | Especifica la familia de fuentes. El valor por defecto depende del navegador. Ver fuente-familia de posibles valores |
| caption | Utiliza la fuente que son utilizados por los controles de subtítulos (como botones, menús desplegables, etc.) |
| icon | Utiliza la fuente que son utilizados por etiquetas de los iconos |
| menu | Utiliza las fuentes que se utilizan por los menús desplegables |
| message-box | Utiliza las fuentes que se utilizan por los cuadros de diálogo |
| small-caption | Una versión más pequeña de la fuente de los subtítulos |
| status-bar | Utiliza las fuentes que se utilizan por la barra de estado |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Una demostración de algunos de los otros valores de propiedades de fuente.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p
style="font:menu">The browser font used in dropdown menus.</p>
<p
style="font:message-box">The browser font used in dialog boxes.</p>
<p
style="font:small-caption">A smaller version of the caption font.</p>
<p
style="font:status-bar">The browser font used in the status bar.</p> Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS Fuentes
Referencia HTML DOM: font property