CSS 字体
¡Es importante elegir la fuente correcta para su sitio web!
Es importante la elección de la fuente
La elección de la fuente puede tener un impacto enorme en la experiencia del usuario del sitio web.
La elección de la fuente puede crear una imagen poderosa para su marca.
Es importante usar fuentes fáciles de leer. Las fuentes agregan valor a su texto. También es importante elegir el color y el tamaño adecuado de la fuente.
Familias de fuentes genéricas
En CSS, hay cinco series de tipografías genéricas:
- Fuentes serif (Serif) - en cada borde de la letra hay un pequeño trazo. Crean una sensación de formalidad y elegancia.
- Fuentes sans-serif (Sans-serif) - las líneas de la fuente son sencillas (sin trazos pequeños). Crean una apariencia moderna y sencilla.
- Fuentes monoespaciadas (Monospace) - aquí todas las letras tienen el mismo ancho fijo. Crean una apariencia mecánica.
- Fuentes de caligrafía (Cursive) - imitan la escritura humana.
- Fuentes de fantasía (Fantasy) - son fuentes decorativas/juguetonas.
Todos los diferentes nombres de fuentes pertenecen a una de estas cinco series de tipografías genéricas.
Diferencias entre las fuentes Serif y Sans-serif
Consejo:En la pantalla del ordenador, las fuentes sans-serif se consideran más fáciles de leer que las fuentes serif.
Algunos ejemplos de fuentes
| Familias de fuentes genéricas | Ejemplo de nombre de fuente |
|---|---|
| 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 |
Propiedad 'font-family' de CSS
En CSS, utilizamos la propiedad 'font-family' para definir la fuente del texto.
La propiedad 'font-family' debe incluir varios nombres de fuentes como sistema de 'reserva' para asegurar la mayor compatibilidad entre navegadores/sistemas operativos. Comience con la fuente que necesita y finalice con la serie genérica (si no hay otras fuentes disponibles, deje que el navegador elija una fuente similar de la serie genérica). Los nombres de las fuentes deben estar separados por comas.
Notas:Si el nombre de la fuente tiene más de una palabra, debe estar entre comillas, por ejemplo: "Times New Roman".
Ejemplo
Establecer diferentes fuentes 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;
}
