Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de la familia de fuentes
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Familia tipográfica Con sintaxis y ejemplos.
describir
La propiedad CSS font-family define una lista priorizada de nombres de familias de fuentes para aplicar a los elementos.
sintaxis
La sintaxis de la propiedad CSS de la familia de fuentes es:
font-family: value;parámetro o parámetro
valor
Una lista de nombres de familias de fuentes. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| apellido | El nombre de la familia de fuentes. Si el nombre de la familia de fuentes contiene espacios, el valor debe estar entre comillas. Algunos valores de apellidos son (y muchos más):
p { familia de fuentes: Georgia, “Times New Roman”, Times; } |
| familia universal | Las familias de fuentes genéricas se utilizan como mecanismo de respaldo en caso de que otros nombres de familias enumerados no estén disponibles. Estos valores no se pueden encerrar entre comillas. El apellido genérico puede ser uno de los siguientes:
p { familia de fuentes: serif; } |
| heredar | El elemento heredará la familia de fuentes de su elemento principal p {familia de fuentes: heredar;} |
notas
- Los valores enumerados en la propiedad font-family están separados por comas.
- Los valores enumerados en la propiedad font-family se enumeran por prioridad. Entonces, el navegador probará cada familia de fuentes en el orden indicado hasta que encuentre una que funcione.
- No todos los navegadores admiten todas las fuentes, por lo que debe asegurarse de que se enumeran suficientes familias de fuentes para que los navegadores puedan encontrar las fuentes disponibles.
- Si el nombre de la familia de fuentes contiene espacios, el nombre debe ir entre comillas. A saber: “Trebuchet MS”.
- Al crear una lista de familias de fuentes, comience con un nombre de familia específico y termine con una familia genérica al final de la lista.
Lista de familias de fuentes sugeridas
Para ayudarlo a comprender cómo crear nuestra propia lista de familias de fuentes, estas son algunas de nuestras sugerencias:
- Verdana, Ginebra, sans serif
- Georgia, “Edad Nueva Roma”, Era, Serif
- “Courier New”, Courier, monoespaciado
- Arial, Helvética, sans-serif
- Tahoma, Ginebra, fuente sans serif
- “Trebuchet MS”, Arial, Helvética, sans-serif
- “Arial Black”, artilugio, sans serif
- “Age New Rome”, era, serif
- “Palatino Linotype”, “Book Antiqua”, Palatino, Serif
- “Lucida Sans Unicode”, “Lucida Grande”, fuente sans serif
- “MS Serif”, “Nueva York”, Serif
- “Comic Sans MS”, cursiva
Compatibilidad del navegador
La propiedad CSS font-family tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de la familia de fuentes a continuación, explorando ejemplos de cómo usarla en CSS.
p { font-family: Arial, Helvetica, sans-serif; }En este ejemplo de familia de fuentes CSS, vamos a
La familia de fuentes en el marcado se establece en la primera Arial. Si Arial no está disponible, el navegador probará con Helvetica. Si Helvetica no está disponible, el navegador probará con una familia de fuentes genérica llamada sans-serif.
A continuación, veamos un ejemplo de una familia de fuentes CSS con espacios.
span { font-family: "Comic Sans MS", cursive; }En este ejemplo de familia de fuentes CSS, tenemos espacios en el nombre Comic Sans MS. En este caso, el apellido debe ir entre comillas, así: “Comic Sans MS”. Si “Comic Sans MS” no está disponible, el navegador probará una familia de fuentes genérica llamada cursiva.