Saltar al contenido principal

Propiedades de fuente

En este apartado vamos a ver las distintas propiedades que podemos utilizar referentes a las fuentes tipográficas de nuestro documento.

font-size​

Indica el tamaño de la fuente.

Puede ser un tamaño absoluto, relativo o en porcentaje.

Toma valores de unidades de CSS.

p {
    font-size: 16px;
}

font-family​

Establece la familia a la que pertenece la fuente.

Si el nombre de una fuente contiene espacios, se deben utilizar comillas para encerrar su nombre.

El valor es el nombre de la familia fuente.

font-weight​

Define el grosor de los caracteres.

Los valores que puede tomar son: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 o 900.

p {
    font-weight: bold;
}

font-style​

Determina si la fuente es normal o cursiva.

Los valores posibles son:

  • normal
  • italic
  • oblique

El estilo oblique es similar al cursiva.

p {
    font-style: italic;
}

font-variant​

Determina si la fuente es normal o mayúsculas pequeñas.

Los valores que puede tomar son:

  • normal
  • small-caps

line-height​

El alto de una línea y por tanto, el espaciado entre líneas.

Es una de esas características que no se podían modificar utilizando HTML.

font​

Permite establecer todas las propiedades anteriores en el orden que se indica a continuación:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font family

Los valores han de estar separados por espacios. No es obligatorio el uso de todos los valores.

p {
    font: italic normal bold 20px 1em Verdana;
}

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de atributos CSS de fuente</title>
    <style type="text/css">
      body {
        background-color: black;
        color: yellow;
        font-family: courier;
      }
      p {
        color: #ffffff;
        font: italic 900 12px Verdana;
      }
    </style>
  </head>
  <body>
    <h3>Ejemplo del uso de atributos de fuente</h3>
    <p>
      El texto de cualquier elemento es de la familia Courier y amarillo, salvo
      el del párrafo que es Verdana, blanco y de tamaño 12 px.
    </p>
  </body>
</html>

En el navegador se visualiza del siguiente modo:

Probar en el navegador

Documento HTML