 |
Propiedades relacionadas a fuentes
Elegir la fuente correcta tiene un gran impacto en la forma en que los lectores experimentan un sitio web, la fuente correcta puede crear una fuerte identidad para su marca.
Es importante utilizar una fuente que sea fácil de leer. La fuente agrega valor a su texto. También es importante elegir el color y el tamaño de texto correctos para la fuente.
Familias de fuentes genéricas
En CSS hay cinco familias de fuentes genéricas:
Las fuentes serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de formalidad y elegancia.
Las fuentes Sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto moderno y minimalista. Fuentes monoespaciadas : aquí todas las letras tienen el mismo ancho fijo. Crean una apariencia mecánica.
Las fuentes cursivas imitan la escritura humana. Las fuentes de fantasía son fuentes decorativas y divertidas. Todos los nombres de fuentes diferentes pertenecen a una de las familias de fuentes genéricas.
| Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Propiedades de las fuentes
| Propiedad | Descripción | Valores |
|---|---|---|
| font-family | Familias de fuentes | nombre-familia|nombre-familia-genérica| * |
| font-style | Estilo de la fuente | normal | italic | oblique |
| font-variant | Convierte a mayúsculas manteniendo un tamaño inferior | normal | small-caps |
| font-weight | Anchura de los caracteres. Normal = 400, Negrita = 700 | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| font-size | Tamaño de la fuente | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje |
La propiedad CSS font-family
En CSS, usamos la font-familypropiedad para especificar la fuente de un texto.
La propiedad font-family debe contener varios nombres de fuentes como un sistema "alternativo", para garantizar la máxima compatibilidad entre navegadores / sistemas operativos. Comience con la fuente que desee y termine con una familia genérica (para permitir que el navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles). Los nombres de las fuentes deben estar separados por comas.
Contamos con una serie de propiedades relacionadas a fuentes:
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<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:
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 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):
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:
La tercera propiedad es font-style, que puede tener los siguientes valores :
italic
oblique
La última propiedad es font-weight (peso de la fuente), pudiendo tomar los siguientes valores:
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:
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:
Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.