Propiedad CSS font
La propiedad CSS font establece la fuente de un elemento. Conoce sus subpropiedades y prueba ejemplos prácticos.
La propiedad font es una propiedad abreviada (shorthand) para las siguientes propiedades:
Puedes establecer todas las propiedades con el siguiente orden: 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. La propiedad line-height se usa para definir el espacio entre líneas.
Es obligatorio definir los valores de las propiedades font-size y font-family. Si se omite uno de los valores, se utilizará su valor predeterminado.
Todos los valores individuales de la propiedad abreviada font que no se especifiquen se establecerán en su valor inicial.
| Propiedad | Descripción |
|---|---|
| Valor inicial | Valores predeterminados de las propiedades. |
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | Sí. Font-size, font-weight, font-stretch y line-height son animables. |
| Versión | CSS1 |
| Sintaxis DOM | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
Font como propiedad abreviada
Al utilizar esta propiedad abreviada, debes tener en cuenta algunas cosas importantes:
Valores obligatorios
Los valores "font-size" y "font-family" se consideran obligatorios. Toda la declaración será ignorada si falta alguno de estos valores.
Valores opcionales
Los otros cinco valores son opcionales. Si se utiliza alguno de ellos, ten en cuenta que deben aparecer antes del valor "font-size" en la declaración; de lo contrario, serán ignorados.
Las propiedades font y font-stretch
La propiedad font-stretch es compatible con todos los navegadores modernos.
La herencia para los valores opcionales
Si omites los valores opcionales, no heredarán los valores de su elemento padre. Se restaurarán a su estado inicial.
Palabras clave que definen fuentes del sistema
Los siguientes valores de la propiedad font pueden usarse como palabras clave:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Establecen la fuente a la que utiliza el sistema operativo del usuario para esa categoría específica. Por ejemplo, si especificas el valor "menu", la fuente del elemento será la misma que usa el sistema operativo para los menús desplegables y listas de menú.
Estos valores de palabras clave solo pueden usarse con la propiedad abreviada font.
Sintaxis
Sintaxis de la propiedad CSS font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Ejemplo de la propiedad font:
Ejemplo de la propiedad CSS font con las propiedades font-style, font-variant, font-weight, font-size, line-height y font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Resultado
Ejemplo de la propiedad font definida con fuentes en cursiva:
Ejemplos de la propiedad CSS font con las propiedades font-family, font-size, font-variant y font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ejemplo de la propiedad font, donde font-size, font-weight y line-height son animables:
Ejemplo de animación de fuente con las propiedades font-size, font-weight, font-stretch y line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| font-style | Define el estilo de la fuente. Su valor predeterminado es normal. |
| font-variant | Define la variante de la fuente. Su valor predeterminado es normal. |
| font-weight | Define el grosor de la fuente. Su valor predeterminado es normal. |
| font-size/line-height | Define el tamaño de la fuente y el interlineado. Su valor predeterminado es normal. |
| font-family | Define la familia tipográfica. Su valor predeterminado depende del navegador. |
| caption | Fuente utilizada para controles con leyenda (por ejemplo, botones, listas desplegables). |
| icon | Fuente utilizada para etiquetar iconos. |
| menu | Fuente utilizada en menús (por ejemplo, menús desplegables y listas de menú). |
| message-box | Fuente utilizada en cuadros de diálogo. |
| small-caption | Fuente utilizada para etiquetar controles pequeños. |
| status-bar | Fuente utilizada en las barras de estado de ventanas. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |