En este apartado vamos a ver las distintas propiedades que podemos utilizar referentes a las fuentes de nuestro documento y que son:
| Elemento | Descripción |
|---|---|
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 |
font-family |
Establece la familia a la que pertenece la fuente. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien. 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 |
font-style |
Determina si la fuente es normal o cursiva. El estilo oblique es similar al cursiva. Los valores posibles son: normal, italic, oblique. |
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. |
Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:
<!DOCTYPE html>
<html>
<head>
<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 el resultado es:
