Aplicar estilo al texto de una página web es una parte importante del dise√±o web. Por ejemplo, es posible que desee que los encabezados aparezcan en una fuente especìfica, o que todo el texto de una página use la fuente serif.
Ahì es donde la fuente CSS -family entra en juego. La propiedad de CSS font-family le permite especificar una o más familias de fuentes que se usarán para dise√±ar el texto en una página web.
Este tutorial lo discutirá, con referencia a ejemplos, los conceptos básicos de la propiedad de familia de fuentes CSS y còmo puede usar la propiedad para aplicar estilo al texto en una página web.
Familia de fuentes CSS
Hay muchos aspectos relacionados con el estilo de una fuente en CSS, que van desde establecer un color hasta el tama√±o de la fuente. Sin embargo, una de las partes más importantes del estilo de una fuente es establecer la familia de fuentes & mdash; el estilo usado por el texto en una página web.
Para configurar la familia de fuentes usada por el texto en una página web, puede utilizar la propiedad font-family. La sintaxis de la propiedad font-family es la siguiente:
La propiedad font-family acepta una sola fuente o una lista de fuentes. Si especifica más de una fuente, debe separar cada fuente con una coma.
El orden en que aparecen las fuentes es el orden en el que el navegador intentará aplicar las fuentes. El navegador utilizará de forma predeterminada la primera fuente de la lista que esté instalada o que el navegador web pueda descargar. Si esa fuente no está disponible, se utilizará la segunda fuente, y asì sucesivamente.
Es importante tener en cuenta que la propiedad font-family seleccionará una fuente para cada carácter en un bloque de texto. Por lo tanto, si un carácter en particular no está disponible en una fuente, la siguiente fuente en su fuente se probará la lista de familias, hasta que se pueda encontrar una fuente adecuada.
Cuando utilice la propiedad font-weight, es mejor incluir al menos un nombre de familia de fuentes genérico (como serif, sans-serif o monoespacio). Esto asegura que si otra fuente en su lista no está disponible, el navegador a√∫n podrá seleccionar una fuente para que aparezca el texto en una página web.
Hay dos formas en las que puede puede usar la propiedad font-family. Primero, puede usar la propiedad para especificar una fuente personalizada para una página web. En segundo lugar, puede utilizar la propiedad para aplicar una familia de fuentes genérica al texto de una página web. Las familias de fuentes genéricas disponibles para usar con la propiedad font-family son las siguientes:
serif: los personajes usan el tipo de letra serif (por ejemplo, Lucida Bright, Palladio).
sans-serif: los caracteres utilizan el tipo de letra sans-serif (por ejemplo, Open Sans, Trebuchet MS).
monoespacio: todos los caracteres tienen el mismo ancho (por ejemplo, monoespacio, Menlo).
cursiva: los caracteres tienen un trazo de uniòn (por ejemplo, Lucida Calligraphy).
fantasìa: fuentes decorativas utilizadas para llamar la atenciòn sobre los caracteres (por ejemplo, Papyrus).
Ahora que conocemos los conceptos básicos de la propiedad de la familia de fuentes, podemos ver algunos ejemplos de còmo funciona en acciòn.
Ejemplos de familias de fuentes CSS
Un club de sellos local, The Seattle Stamp Club, nos pidiò personalizar las fuentes de ciertas partes en su sitio web.
Primero, se nos ha pedido que cambiemos la fuente de todos los tìtulos "h1" en su página de " Contacto " para usar la fuente " Open Sans & rdquo ;. , por ejemplo, el encabezado "Contáctenos" en la página "Contacto" de su sitio web debe aparecer en Open Sans. Si esa fuente no está disponible, se debe usar la familia genérica "sans-serif". Podrìamos usar el siguiente còdigo para realizar esta tarea:
Haga clic en el & nbsp; en el editor de còdigo de arriba para ver la salida de nuestro còdigo HTML / CSS.
En nuestro còdigo HTML, hemos especificado un encabezado usando un "h1" etiqueta que contiene el texto Contáctenos. Luego, en nuestro còdigo CSS, usamos la familia de fuentes para definir la fuente de "h1" elementos en nuestra página web.
El valor que asignamos a la propiedad font-family establece la fuente de todos los "h1" elementos a Open Sans, y si esa fuente no está disponible, se utiliza la familia genérica sans-serif. Para lograr esto, especificamos dos fuentes, separadas por una coma.
Ahora, supongamos que también quisiéramos aplicar estilo a todas las "p" elementos en la página Contact del club de sellos para usar la fuente Times. Si esa fuente no está disponible, se debe utilizar una fuente serif predeterminada. Podrìamos usar el siguiente còdigo para realizar esta tarea:
Haga clic en el & nbsp; botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.
En nuestro ejemplo, declaramos un párrafo de texto usando un "p" etiqueta. Luego, configuramos la familia de fuentes de todas las "p" etiquetas en nuestra hoja de estilo CSS para usar las fuentes Times y serif. De forma predeterminada, el navegador intentará mostrar todos los archivos "p" etiquetas en la fuente Times. Si esta fuente no está disponible, se utiliza la fuente serif.
Conclusiòn
La propiedad de familia de fuentes de CSS le permite especificar el estilo del texto en una página web. Por ejemplo, puede usar la propiedad de familia de fuentes para usar el " Arial " fuente, o la fuente genérica " cursiva " para todo el texto de una página web.
Este tutorial analiza, con referencia a ejemplos, los conceptos básicos de la propiedad de familia de fuentes CSS y còmo puede usarlo para dise√±ar el texto en una página web. ¬°Ahora está listo para comenzar a usar la propiedad font-family como un dise√±ador web maestro!
en el editor de còdigo de arriba para ver la salida de nuestro còdigo HTML / CSS. 
botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.