Cree fantásticos sitios web utilizando CSS y propiedades de control de fuentes

En el pasado, modificar la fuente de una página web generalmente significaba anidar texto relevante en la etiqueta y usar atributos para controlar su color, tamaño y estilo. Hoy en día, este enfoque ya no se reconoce porque mezcla estilo visual con marcado de contenido real. Hoy recomendamos el método de concentrar la información de estilo de fuente en un archivo separado llamado Hoja de estilo en cascada (CSS).

Concentrar la información de fuentes en un único archivo CSS tiene muchas ventajas obvias: es fácil de operar, no requiere ningún software especial y funciona de manera uniforme en la mayoría de los principales navegadores. Es más, dado que la información está centralizada en una única ubicación, es fácil modificar la apariencia visual de una página web: simplemente puede cambiar la fuente o el color de la hoja de estilo principal, y los cambios se "en cascada" instantáneamente a lo largo de toda su página. sitio.

Suena divertido, ¿verdad? Continúe leyendo porque en este artículo discutiré la propiedad de fuente CSS, que está diseñada para reemplazar el antiguo elemento . Si necesita control centralizado sobre la fuente, el color, el tamaño del texto y el espaciado de su página HTML, es. Una poderosa herramienta para aprovechar.

tipo de control

El atributo de fuente define la fuente utilizada por el elemento correspondiente. Esta propiedad normalmente contiene una lista de nombres de fuentes separados por comas; los nombres que contienen espacios en blanco pueden estar entre comillas. Cuando se aplica, el navegador utilizará la primera fuente que encuentre en la lista, o la fuente estándar predeterminada del navegador si no se encuentra ninguna fuente válida.

El Listado A es un ejemplo de aplicación de esta instrucción:

Lista A

La figura A muestra el resultado.

Figura A

familia_fuente

Es importante recordar que esta directiva depende en gran medida de las fuentes que muestra el sistema cliente; en el ejemplo anterior, si el sistema no muestra las fuentes Bookman Old Style y Verdana, se utilizará la fuente predeterminada del navegador. Para evitar este problema, es mejor agregar una lista de nombres de fuentes genéricas, como serif, sans-serif o cursiva, después de la lista de nombres de fuentes especiales, esto le indica al navegador que use la fuente que mejor coincida en esa clase de fuente; . El Listado B es una versión revisada del ejemplo anterior que resuelve exactamente el problema anterior.

Lista B