La variante habitual para definir las fuentes tiene este aspecto
body { font-family: Arial, Helvetica, Serif; }Aquí se asigna la fuente Arial al elemento body. Si no está disponible en el sistema del visualizador, se utiliza Helvetica. Si Helvetica tampoco está disponible, se indica al navegador que utilice al menos una fuente sin Serif. Por supuesto, esto no se puede controlar realmente. Al final, no tienes ningún control real sobre el resultado final. Así que lo que has diseñado tan maravillosamente en GIMP o Photoshop puede caer de bruces en la jungla de las fuentes. Más adelante veremos cómo resolver este problema.
Pero primero, volvamos a la versión clásica. A continuación encontrará una definición típica que se utiliza para personalizar el aspecto básico de la página web. En primer lugar, puedes usar la definición body para especificar la información básica de la fuente.
body { font-family: Georgia, Tim, "Times New Roman", serif; color: #000; font-size: 1.1em; line-height: 150%; } p { font-size: 1.1em; }
Por supuesto, ahora puede diseñar los elementos individuales de la página por separado. Esto incluye, por ejemplo, los títulos, los pasajes en cursiva, etc. En este contexto, sin embargo, recuerde el principio de herencia de CSS.
h1 { font-size: 1.6em; }El resultado podría verse así en el navegador:
Uso de fuentes web
El problema con las definiciones convencionales de fuentes es obvio: en última instancia, no puede estar seguro de que la fuente que especifique esté realmente disponible para el espectador. En caso de duda, los navegadores seleccionarán una fuente similar a la especificada si no la encuentran. Por supuesto, usted no tiene ningún control real sobre el resultado. Aquí es exactamente donde @font-face viene al rescate. Esto le permite especificar explícitamente una fuente que se utilizará. En principio, funciona de la misma manera que con las imágenes. Por lo tanto, debe especificar la ruta al archivo de la fuente.
En los navegadores modernos, se utilizan las llamadas fuentes web WOFF para @font-face. Estas fuentes son significativamente más pequeñas que los formatos de fuentes web EOT y TTF utilizados anteriormente.
Una definicióntípica de @font-face tiene este aspecto:
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
En font-family se anota el nombre de la fuente que se va a utilizar. Hasta aquí no hay peculiaridades sintácticas. La URL en la que se encuentra el archivo de fuentes web se especifica mediante src:url(). Si existe la posibilidad teórica de que la fuente esté disponible en el ordenador del usuario, se debe especificar también local. A este local se le asigna el nombre de la fuente.
@font-face { font-family: "Bitstream Vera Serif Bold"; local: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
Después de la definición @font-face, las fuentes web pueden utilizarse normalmente.
h1 { font-family: "Bitstream Vera Serif Bold"; font-size: 1.2em; color: #3399FF; }Aquí están las fuentes web, por ejemplo
La cuestión ahora, por supuesto, es dónde conseguir los archivos de fuentes web pertinentes. Google, por ejemplo, aloja muchas de estas fuentes web en el sitio web http://www.google.com/fonts.
Estas fuentes pueden integrarse directamente a través de esta página.
La llamada correspondiente sería la siguiente
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
La fuente web deseada se especifica después de font-family. Puede encontrar estos nombres y llamadas en la página de Google mencionada. Una vez integrada la fuente web, puede utilizarse como cualquier otra fuente.
body { font-family: 'Tangerine', Serif; font-size: 1.2em; }Si lo desea, también puede utilizar varias fuentes web en su sitio. Para ello, vaya a http://www.google.com/fonts y haga clic en Añadir a la colección para las fuentes web deseadas. Una vez que todas las fuentes web estén en su colección, haga clic en Utilizar en la parte inferior de la página. Allí se muestra directamente una especie de velocímetro.
Esta ilustración muestra los efectos que la integración de las fuentes web tiene sobre el tiempo de carga de la página. Estos efectos son realmente medibles y aumentan con cada fuente web adicional.
El siguiente ejemplo muestra lo fácil que es utilizar varias fuentes web que haya añadido previamente a su colección:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">.
Por lo tanto, las fuentes web individuales se anotan una tras otra, separadas por una línea vertical. La llamada completa que corresponde a la colección seleccionada se muestra en la mencionada página Utilizar.
Muchas de las fuentes web ofrecen los denominados subconjuntos, como latín o cirílico. Para incluirlos explícitamente, introduzca el subconjunto deseado como valor de parámetro.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Si se van a utilizar varios de estos subconjuntos, se separan cada uno por una coma.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Sin embargo, el uso de esta fuente web no deja de ser controvertido por un motivo completamente distinto. En primer lugar, al abrir la página debe establecerse una conexión con un servidor de Google. Esto puede evitarse descargando el archivo de la fuente web y subiéndolo a su propio servidor. Sin embargo, preste siempre atención a las condiciones de uso de las fuentes web que desee utilizar de este modo.
La definición de fuente de la página de ejemplo
A continuación encontrará las definiciones de fuentes que utilizaré para la página de ejemplo actual:
body { font-family: 'Crimson Text', Helvetica, Serif; color: #444; text-decoration: none; line-height: 1.5em; font-size: 1.2em; } p { font-size: 1.1em; } h1 { font-size: 1.6em; color: #3399FF; }
Por supuesto, puede incluir elementos adicionales. En el caso que nos ocupa, sin embargo, esta sintaxis es suficiente.
