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

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

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

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

TAMBIÉN TE INTERESA

all ia

all ia, el primer buscador de herramientas de inteligencia artificial

Ha llegado el punto en que uno ya se pierde con las herramientas de inteligencia artificial. A lo largo de este último año han surgido infinidad de soluciones que se distribuyen en todos los rincones de internet. Se podría decir que hay una para cada inquietud, sea a nivel personal en el terreno profesional. Pero

login-y-contraseña

El método definitivo para tener una contraseña segura: 9 pasos

Tener una contraseña segura es el primer paso para tener cierta seguridad en nuestra vida digital. Correo electrónico, claves del banco, Amazon, por poner unos ejemplos… son plataformas que estamos acostumbrados a usar casi a diario. Para todos ellos y el resto de plataformas a las que estemos suscritos, la contraseña segura es fundamental para

meta-quest-3

Meta Quest 3: características del nuevo adalid de la realidad virtual

La realidad virtual (VR) ha experimentado un crecimiento exponencial en los últimos años, y Meta Quest 3 se presenta como el pináculo de esta evolución. Como la tercera generación de dispositivos de realidad virtual autónomos desarrollados por Meta, anteriormente conocida como Facebook, el Meta Quest 3 representa una amalgama de tecnología de vanguardia y diseño

Wacom-Movink

Wacom Movink, el panel interactivo OLED más fino y ligero del mercado

Parecía estar ya todo escrito sobre monitores y panales y en éstas, llega el Wacom Movink para sorprendernos a todos. Dirigido especialmente para diseñadores y creadores de contenido, esta pantalla representa un avance significativo por su combinación única de rendimiento, portabilidad y calidad visual excepcional. El dispositivo llega acompañado de un nuevo lápiz digital, su