Contamos con una serie de propiedades relacionadas a fuentes:
font-family font-size font-style font-weight font-variant
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<style>
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>
Como podemos observar, hemos definido dos reglas de estilos para los elementos h1 y h2, eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichos elementos HTML.
La primera regla definida para el elemento h1 es:
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
Recordemos que para definir la regla de estilo debemos indicar el nombre del elemento HTML a la que definiremos el estilo (en este caso h1) y luego, entre llaves, todas las propiedades y sus valores separados por punto y coma.
La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que puede acceder el navegador son:
Arial Arial Black Arial Narrow Courier New Georgia Impact Tahoma Times New Roman Verdana
En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para ese elemento HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):
font-family: verdana, arial, georgia;
La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles:
font-size:30px;
La tercera propiedad es font-style, que puede tener los siguientes valores :
normal italic oblique
La última propiedad es font-weight (peso de la fuente), pudiendo tomar los siguientes valores:
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos)
La segunda regla define sólo dos propiedades relacionadas a la fuente:
h2 {
font-family:verdana;
font-size:20px;
}
Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegirá los valores correspondientes.
Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:
small-caps normal
Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.