Fuentes CSS
¡Es importante elegir la fuente adecuada para su sitio web!
La selección de fuentes es importante
Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan un sitio web.
La fuente correcta puede crear una fuerte identidad para su marca.
Es importante usar 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 un aspecto mecánico.
- Las fuentes cursivas imitan la escritura humana.
- Las fuentes de fantasía son fuentes decorativas/divertidas.
Todos los diferentes nombres de fuentes pertenecen a una de las familias de fuentes genéricas.
Diferencia entre fuentes Serif y Sans-serif
Nota: en las pantallas de las computadoras, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.
Algunos ejemplos de fuentes
| Generic 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 |
La propiedad de la familia de fuentes CSS
En CSS, usamos la font-familypropiedad para especificar la fuente de un texto.
Nota : si el nombre de la fuente es más de una palabra, debe estar entre comillas, como: "Times New Roman".
Sugerencia: la font-familypropiedad debe contener varios nombres de fuentes como un sistema "alterno", para garantizar la máxima compatibilidad entre navegadores y 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. Lea más sobre las fuentes alternativas en el próximo capítulo .
Ejemplo
Especifique algunas fuentes diferentes para tres párrafos:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}