CSS - fuente

Descripción

La propiedad de fuente es una propiedad abreviada que se utiliza para afectar la representación del texto.

Valores posibles

Los posibles valores dependerán de cómo estemos usando esta propiedad.

  • <font-style> - Cualquier valor permitido para la propiedad estilo de fuente.

  • <font-variant> - Cualquier valor permitido para la propiedad font-variant.

  • <font-weight> - Cualquier valor permitido para la propiedad font-weight.

  • <font-size> - Cualquier valor permitido para la propiedad font-size.

  • <font-family> - Cualquier valor permitido para la propiedad font-family.

  • <line-height> - Cualquier valor permitido para la altura de la línea de propiedad.

  • caption- La fuente que usa el sistema operativo para los controles con subtítulos (por ejemplo, botones y menús desplegables). Este es uno de los valores de "fuente del sistema".

  • icon- La fuente que utiliza el sistema operativo para etiquetar iconos. Este es uno de los valores de "fuente del sistema".

  • menu- La fuente utilizada por el sistema operativo en los menús (por ejemplo, menús desplegables y listas de menús). Este es uno de los valores de "fuente del sistema".

  • message-box- La fuente que utiliza el sistema operativo en los cuadros de diálogo (por ejemplo, cuadros de diálogo de advertencia). Este es uno de los valores de "fuente del sistema".

  • small-caption- La fuente que usa el sistema operativo para etiquetar pequeños controles. Este es uno de los valores de "fuente del sistema".

  • status-bar- La fuente utilizada por el sistema operativo en las barras de estado de la ventana. Este es uno de los valores de "fuente del sistema".

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

object.style.font = "bold italic small-caps 250%/1.2 sans-serif";

Ejemplo

Aquí está el ejemplo que usa la propiedad de fuente abreviada:

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado: