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

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.