No artigo anterior, a Magia de CSS3 de Modernizr, estivemos explicando quais eram as bases utilizadas em Modernizr para detectar a compatibilidade do navegador do usuário com CSS3. Vimos um exemplo simples que cremos será bom complementar com outras práticas.

N este artigo trabalharemos com o atributo de CSS3 @font-face, que permite utilizar qualquer tipografia em um web site, sempre que tivermos o arquivo da fonte. Veremos que em ocasiões umas tipografias são vistas menores que outras na tela e como fazer para que possamos definir tamanhos de texto diferentes quando o navegador mostra os textos com uma ou outra fonte de texto.

Regra @font-face e compatibilidade

Começamos vendo a regra @font-face, que serve para definir tipografias para textos, embora as mesmas não estejam presentes no sistema do usuário. Esta regra é própria de CSS3 e para utilizá-la devemos subir o arquivo da tipografia ao nosso servidor, ou então utilizar algum serviço de host de fontes como Google Fonts, que nos permita fazer uso de uma variedade de tipos de letra alojadas nos servidores de Google.

Por exemplo, este código CSS teremos acesso à fonte "Tulpen One" alojada em Google Fonts:

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

Uma vez importada a fonte, podemos utilizá-la nos elementos que desejemos, por exemplo:

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

Esses estilos funcionam em todos os navegadores, mas claro, se o do usuário não aceitou o @font-face de Google Fonts, simplesmente ignorará a fonte 'Tulpen One' e mostrará o texto em "serif" (é a fonte com serifa que tenha configurada o navegador por padrão).

Agora, quero que vocês fiquem cientes de um possível problema. A fonte 'Tulpen One' é menor que o normal, e por isso o tamanho 1.5em não seria muito bom para um titular H1 (se veria pequeno demais para que visualmente se entenda que é um cabeçalho, Header de nível 1). É por isso que valeria a pena saber se nosso navegador aceitou ou não 'Tulpen One', para que nesse caso possamos aumentar o tamanho do texto um poquinho mais. É justamente aqui onde podemos aproveitar as benesses de Modernizr, já que nos permite saber se a regra de estilos @font-face está ou não presente em nosso navegador.

Se @font-face era compatível com nosso navegador, então Modernizr criou, na etiqueta BODY, uma classe chamada "fontface" que podemos utilizar para definir estilos só para os clientes web que entenderam essa regra de estilos. Por isso, a seguinte declaração só será levada em conta pelos navegadores que estão mostrando fonte do cabeçalho com "Tulpen One".

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

Como podemos ver, definimos simplesmente um tamanho de letra maior, que nos servirá para que os cabeçalhos, aos que havíamos definido a tipografia "Tulpen One" tenham um tamanho de letra mais adequado.

Podemos ver um exemplo de página que faz uso de @font-face e a detecção de compatibilidade com Modernizr.

Conclusão

A maioria dos navegadores atuais admitem @font-face, mas muitos usuários usam ainda browsers pouco atualizados que podem não ter compatibilidade com essa regra de estilos.

Nos casos que queiramos aplicar estilos só para os navegadores que suportan @font-face, dispomos de Modernizr para nos facilitar a vida.

No artigo seguinte veremos outro exemplo de detecção de compatibilidade com regras de estilos.