La propiedad CSS Font-Family y el uso de pilas de fuentes

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
VALORACIÓN DEL ARTÍCULO:
5/5


El diseño tipográfico es una pieza de importancia crítica para el éxito del diseño de un sitio web. La creación de sitios con texto que es fácil de leer y que se ve muy bien son los objetivos de todo profesional del diseño web. Para lograrlo, deberá ser capaz de establecer las fuentes específicas que desea utilizar en sus páginas web. Para especificar el tipo de letra o la familia tipográfica en sus documentos Web, utilizará la propiedad font-family style en su CSS.

El estilo de familia de fuentes más sencillo que podría usar incluiría sólo una familia de fuentes:

p {font-family: Arial;}

Si aplicara este estilo a una página, todos los párrafos se mostrarían en la familia de fuentes “Arial”. Esto es genial y como “Arial” es lo que se conoce como una “fuente segura para la web”, lo que significa que la mayoría de los ordenadores (si no todos) la tendrían instalada, puedes estar tranquilo sabiendo que tu página se mostrará en la fuente deseada.

¿Qué sucede si la fuente que ha seleccionado no se encuentra? Por ejemplo, si no usas una “fuente segura para la web” en una página, ¿qué hace el agente de usuario si no tiene esa fuente? Hacen una sustitución.

Esto puede resultar en páginas muy divertidas. Una vez fui a una página donde mi ordenador lo mostraba completamente en “Wingdings” (un conjunto de iconos) porque mi ordenador no tenía la fuente que el desarrollador había especificado, y mi navegador hizo una elección muy pobre en cuanto a la fuente que usaría como reemplazo. La página era completamente ilegible para mí! Aquí es donde entra en juego una pila de fuentes.

Separar varias familias de fuentes con una coma en una pila de fuentes

Una “pila de fuentes” es una lista de fuentes que desea que su página utilice. Usted pondría sus opciones de fuentes en el orden de su preferencia y las separaría con una coma. Si el navegador no tiene la primera familia de fuentes en la lista, probará la segunda y luego la tercera y así sucesivamente hasta que encuentre una que tenga en el sistema.

font-familia: Pussycat, argelino, Broadway;

En el ejemplo anterior, el navegador buscará primero la fuente “Pussycat”, luego “Algerian” y luego “Broadway” si no se encontró ninguna de las otras fuentes. Esto le da más posibilidades de que se utilice al menos una de las fuentes elegidas. No es perfecto, por lo que tenemos aún más que podemos añadir a nuestra pila de fuentes (¡sigue leyendo!).

Usar fuentes genéricas al final

Así que puede crear una pila de fuentes con una lista de fuentes y aún así no tener ninguna de las cuales el navegador pueda encontrar. Obviamente no quieres que tu página se muestre ilegible si el navegador hace una mala elección de sustitución. Afortunadamente, CSS también tiene una solución para esto: fuentes genéricas.

Siempre debe terminar su lista de fuentes (incluso si se trata de una lista de una familia o de las únicas fuentes seguras para la Web) con una fuente genérica. Hay cinco que puedes usar:

  • cursiva
  • fantasía
  • monoespacio
  • sans-serif
  • serif

Los dos ejemplos anteriores pueden ser cambiados a:

font-familia: Arial, sans-serif;

font-family: Pussycat, argelino, Broadway, fantasía;

>

Algunos nombres de familias de fuentes son dos o más palabras

Si la familia tipográfica que desea utilizar es más de una palabra, debe rodearla con comillas dobles. Aunque algunos navegadores pueden leer familias de fuentes sin las comillas, puede haber problemas si el espacio en blanco se condensa o se ignora.

font-familia: “Times New Roman”, serif;

En este ejemplo, puede ver que el nombre de la fuente “Times New Roman”, que es multipalabra, está entre comillas. Esto le indica al navegador que las tres palabras son parte del nombre de la fuente, en lugar de tres fuentes diferentes, todas con nombres de una sola palabra.

Original de Jennifer Krynin. Editado el 12/2/16 por Jeremy Girard

Deja un comentario

TAMBIÉN TE INTERESA

¿Cómo Instalar Netflix en televisión y PC?

Esta es la plataforma que ofrece contenido multimedia con mayor reconocimiento en el mundo. Brinda una gran diversidad de alternativas para ver series y películas en el PC, el móvil o en el televisor. A continuación, te explicamos cómo instalar Netflix en televisión y PC. Índice de contenidos1  ¿Cómo instalar Netflix?: Los mejores métodos1.1 Televisor

impresoras-HP-ENVY

Las impresoras HP más actuales para uso familiar

Las últimas impresoras HP que han salido a la venta sirven para todo y con ellas en casa no tendrás ni un solo problema de impresión. Y es que en ocasiones pasa bastante desapercibida la cuestión de las impresiones en el hogar. Frecuentemente, solemos dejar este proceso para cuando estemos en la empresa, o bien

Los 5 mejores calefactores de bajo consumo para el hogar

El hogar siempre debe ser lo más acogedor posible y eso incluye disfrutar de una temperatura adecuada incluso en las épocas más frías de invierno. Para estas ocasiones, una alternativa es calentar gradualmente el ambiente de la habitación con un calefactor. Es por esto que aquí encontrarás los mejores calefactores de bajo consumo que existen

control parental

Control Parental: las mejores herramientas para hacerlo eficaz

En la actualidad los menores están en contacto con el mundo tecnológico y esto hace que estén expuestos a una gran cantidad de peligros de los cuales es difícil protegerlos, es por esto que aparece el control parental como una forma de limitar los diferentes sitios web a los que pueden acceder los niños. Índice

content creator

La pandemia y HP impulsan un perfil emergente: content creator

El creador de contenido o content creator es un profesional que se ha puesto muy de moda en los meses de confinamiento como así revela HP.   Como consecuencia del COVID-19, la gente ha pasado más tiempo en casa que nunca, recurriendo a la creatividad y a su talento para evadirse y compartir su mundo

¿Cómo elegir un Televisor de 40 pulgadas?

La tecnología se encuentra en innovación constante, cada día son más las funciones y características que se agregan a los televisores, además de incrementar su tamaño para superar a los modelos anteriores. Te explicaremos paso a paso lo que debes saber acerca de las especificaciones que proporciona el fabricante, para que logres hacer una buena