Propiedad font de CSS
La propiedad font es una propiedad abreviada para las siguientes propiedades:
Puedes establecer todas las propiedades en 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 utiliza para establecer el espacio entre líneas.
Es obligatorio definir los valores de las propiedades font-size y font-family. Si falta uno de los valores, se utiliza su valor predeterminado.
Todos los valores individuales de la propiedad abreviada font que no se especifiquen se establecerán en su valor inicial.
| Property | Description |
|---|---|
| Initial Value | Valores predeterminados de las propiedades. |
| Applies to | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Inherited | Sí. |
| Animatable | Sí. Font-size, font-weight, font-stretch y line-height son animables. |
| Version | CSS1 |
| DOM Syntax | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
Font como propiedad abreviada
Al utilizar esta propiedad abreviada, debes conocer algunos aspectos importantes sobre ella:
Valores obligatorios
Los valores "font-size" y "font-family" se consideran obligatorios. Toda la declaración se ignorará si falta uno de estos valores.
Valores opcionales
Los otros cinco valores son opcionales. En caso de usar uno de estos valores, ten en cuenta que deben ir antes del valor "font-size" en la declaración, de lo contrario se ignorarán.
Las propiedades font y font-stretch
La propiedad font-stretch es compatible con todos los navegadores modernos.
La herencia para valores opcionales
Si omites los valores opcionales, no heredarán 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 se pueden usar como palabras clave:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Establecen la fuente a la que se utiliza en el sistema operativo del usuario para esa categoría específica. Por ejemplo, si especificas el valor “menu”, la fuente se establecerá en ese elemento para usar la misma fuente que se utiliza en el sistema operativo para menús desplegables y listas de menús.
Estos valores de palabras clave solo se pueden usar con la propiedad abreviada font.
Sintaxis
Sintaxis de la propiedad font de CSS
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 font de CSS 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 font de CSS 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
| Value | Description |
|---|---|
| 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 la altura de línea. Su valor predeterminado es normal. |
| font-family | Define la familia de la fuente. Su valor predeterminado depende del navegador. |
| caption | Fuente que se utiliza para controles con etiqueta (por ejemplo, botones, menús desplegables). |
| icon | Fuente que se utiliza para etiquetar iconos. |
| menu | Fuente que se utiliza en menús (por ejemplo, menús desplegables y listas de menús). |
| message-box | Fuente que se utiliza en cuadros de diálogo. |
| small-caption | Fuente que se utiliza para etiquetar controles pequeños. |
| status-bar | Fuente que se utiliza en las barras de estado de las ventanas. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son algunas de las propiedades que puedes usar para dar estilo a las fuentes en CSS?