En el artículo anterior, la Magia de CSS3 de Modernizr, estuvimos explicando cuáles eran las bases utilizadas en Modernizr para detectar la compatibilidad del navegador del usuario con CSS3. Vimos un sencillo ejemplo que creemos vendrá bien complementar con otras prácticas.

En este artículo trabajaremos con el atributo de CSS3 @font-face, que permite utilizar cualquier tipografía en un sitio web, siempre que tengamos el archivo de la fuente. Veremos que en ocasiones unas tipografías se ven menores que otras en la pantalla y cómo hacer para que podamos definir tamaños de texto diferentes cuando el navegador muestra los textos con una u otra fuente de texto.

Regla @font-face y compatibilidad

Comenzamos viendo la regla @font-face, que sirve para definir tipografías para textos, aunque las mismas no estén presentes en el sistema del usuario. Esta regla es propia de CSS3 y para utilizarla debemos de subir el archivo de la tipografía a nuestro servidor, o bien utilizar algún servicio de host de fuentes como Google Fonts, que nos permita hacer uso de una variedad de tipos de letra alojadas en los servidores de Google.

Por ejemplo, este código CSS tendremos acceso a la fuente "Tulpen One" alojada en Google Fonts:

@import url(http://fonts.googleapis.com/css?family=Tulpen+One);

Una vez importada la fuente, podemos utilizarla en los elementos que deseemos, por ejemplo:

h1{
   font-family: 'Tulpen One', serif;
   font-size: 1.5em;
   color: #296033;
}

Esos estilos funcionan en todos los navegadores, pero claro, si el del usuario no aceptó el @font-face de Google Fonts, pues simplemente ignorará la fuente 'Tulpen One' y mostrará el texto en "serif" (es la fuente con serifa que tenga configurada el navegador por defecto).

Ahora bien, quiero haceros partícipes de un posible problema. La fuente 'Tulpen One' es más pequeña de lo normal, por lo que el tamaño 1.5em no sería muy bueno para un titular H1 (se vería demasiado pequeño para que visualmente se entienda que es un encabezamiento, Header de nivel 1). Es por ello que merecería la pena saber si nuestro navegador aceptó o no 'Tulpen One', para que en ese caso podamos aumentar el tamaño del texto un poquito más. Es justamente aquí donde podemos aprovechar las bondades de Modernizr, ya que nos permite saber si la regla de estilos @font-face está o no presente en nuestro navegador.

Si @font-face era compatible con nuestro navegador, entonces Modernizr creó, en la etiqueta BODY, una clase llamada "fontface" que podemos utilizar para definir estilos solo para los clientes web que entendieron esa regla de estilos. Por ello, la siguiente declaración será solo tenida en cuenta por los navegadores que están mostrando fuente del encabezamiento con "Tulpen One".

.fontface h1{
   font-size: 2.5em;
}

Como podemos ver, hemos definido simplemente un tamaño de letra mayor, que nos servirá para que los encabezamientos, a los que habíamos definido la tipografía "Tulpen One" tengan un tamaño de letra más adecuado.

Podemos ver un ejemplo de página que hace uso de @font-face y la detección de compatibilidad con Modernizr.

Conclusión

La mayoría de los navegadores actuales admiten @font-face, pero muchos usuarios usan todavía browsers poco actualizados que pueden no tener compatibilidad con esa regla de estilos.

En los casos que queramos aplicar estilos solo para los navegadores que soportan @font-face, disponemos de Modernizr para facilitarnos la vida.

En el siguiente artículo veremos otro ejemplo de detección de compatibilidad con reglas de estilos.