CSS: Familia de fuentes
Muchos conocen con la frase "Juega con las fuentes" - un gran mantra cuando el aspecto visual del texto no es satisfactorio. Para especificar una fuente, se utiliza la regla font-family, que permite seleccionar una o varias fuentes que se utilizarán en el documento.
<style>
.nueva-fuente {
font-family: Arial, Futura;
}
</style>
<p class="nueva-fuente">Párrafo</p>
Las fuentes se obtienen de las que están instaladas en tu sistema. Por esta razón, es recomendable elegir "fuentes comunes", ya que otro usuario puede no tenerlas. Además, es posible conectar fuentes de servicios externos, como Google Fonts, o cargarlas directamente en tu servidor donde se encuentra el sitio web.
Las fuentes más comunes son:
- Times New Roman
- Arial
- Tahoma
- Verdana
- Courier New
Es más probable que estas fuentes estén instaladas en el sistema de otro usuario. Si las fuentes especificadas en la propiedad font-family no están en la computadora, se utilizará la fuente predeterminada establecida en la configuración del navegador.
Al agregar estilos, es una buena práctica agregar una familia de fuentes universal a la regla font-family. Actualmente hay 5 de estas familias:
serif- fuentes con remates (antiguas). Un ejemplo destacado de estas fuentes es Times New Romansans-serif- fuentes sin remates (grotesco). Las fuentes más conocidas de este tipo son Arial y Verdanacursive- fuentes cursivasfantasy- fuentes decorativas. Esta familia se utiliza con menos frecuencia. El motivo es que las fuentes decorativas son demasiado diferentes para ser intercambiablesmonospace- fuentes de ancho fijo. Estas son fuentes en las que todos los caracteres tienen el mismo ancho. Los programadores las utilizan con mucha frecuencia en editores de texto
Al agregar una familia de fuentes universal a la regla font-family, nos protegemos de que el usuario no tenga la fuente que hemos especificado. El navegador automáticamente seleccionará una sustitución de la fuente faltante de la familia de fuentes universal que se haya especificado.
El ejemplo del comienzo de la lección, al agregar una familia de fuentes universal, se verá así:
<style>
.nueva-fuente {
font-family: Arial, Futura, sans-serif;
}
</style>
<p class="nueva-fuente">Párrafo</p>
Ahora, si el usuario no tiene las fuentes Arial o Futura en su sistema, se seleccionará una fuente del sistema sin remates.
Tarea
Agrega un párrafo con la clase verdana-text en el editor y establece la fuente Verdana para él. Escribe los estilos dentro de la etiqueta <style>. No olvide especificar una familia de fuentes universal: fuentes sin remates.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.
Consejos útiles
La familia de fuentes siempre se especifica al final