Download dos Arquivos Utilizados

Versão em texto

Com a difusão cada vez maior de layouts responsivos, novos desafios aparecem. A variedade de dispositivos com que temos que trabalhar é cada vez maior. Além da variedade de resoluções de tela, também há a questão da densidade de pixels da mesma.

Um ótimo exemplo disso são os produtos da Apple com a tela retina, que possuem uma densidade muito maior de pixels em um mesmo tamanho de tela. Basicamente, isso faz com que tenhamos um aparelho com o dobro de resolução "fingindo" que é uma tela menor. Tomando o exemplo do iPhone, versões anteriores têm 320x480 pixels de resolução em uma tela que fisicamente tem o mesmo tamanho que a do iPhone 4S, este com uma resolução duas vezes maior, com 640x960 pixels.

Qual o impacto disso no nosso trabalho de front end? Imagens irão perder qualidade em uma tela retina serem renderizadas em uma resolução maior. Uma imagem com 200x200 pixels deveria ter 400x400 pixels para aparecer com a mesma qualidade e clareza em um iPhone 4S, por exemplo. Isso cria novos desafios na hora de inserir imagens em um site. Há algumas sugestões nesta área para criação de novos elementos HTML e até de algumas reformas na tag img.

Porém, neste artigo gostaria de abordar outra parte deste problema: o de ícones de interface em websites. Quando usamos ícones para ilustrar algumas partes do layout, como links para redes sociais, comentários, entre outros, geralmente o fazemos com a propriedade background CSS (Veja um exemplo aqui).

É o que eu também estava fazendo neste meu novo site, mas esta abordagem não deu certo desta vez. Por quê?

Eu fiz, neste site, um layout responsivo completamente ligado ao tamanho de fonte da página. Se o tamanho da fonte aumenta, o site inteiro acompanha e vice-versa. Usando a técnica de background CSS, o ícone desalinhava em relação ao texto e, pior, se o usuário dava zoom no site, a imagem aumentava além da sua capacidade e ficava borrada (justamente o que acontece em telas retina).

Por isso, uma das soluções que temos hoje é a utilização das icon fonts, ou fontes de ícones.

Veja o exemplo final aqui

Como as fontes são feitas de vetores — instruções matemáticas de pontos e linhas — e não de pixels, elas podem aumentar ou diminuir sem perder qualidade. Além disso, como são fontes, ou seja, texto, podemos usar efeitos como text-shadow, transições de cor e muito mais. A desvantagem é que os ícones, assim como qualquer bloco de texto que trabalhamos com CSS, acabam ficando com apenas uma cor. Já há alguns experimentos contornando esta situação.

Utilizar as icon fonts é simples. A parte mais difícil, que seria fazer os vetores e transformá-los em fontes, é enormemente simplificada por sites especializados. Os principais são o IcoMoon e o Fontello. Pessoalmente, gostei muito da objetividade do Fontello. Você escolhe os seus símbolos e baixa a fonte em poucos minutos; por outro lado, o Icomoon é mais completo. Neste tutorial baixei uma fonte do Fontello com dois símbolos: as logos do Twitter e do Facebook.

A fonte vem em um arquivo zip que deve ser extraído para uma pasta de sua preferência. O arquivo "demo.html" já contém uma demonstração dos símbolos e um checkbox chamado "Show Codes" para mostrar os códigos de cada um, códigos estes que serão necessários para a nossa implementação no site. Outro ponto fundamental é copiar a pasta "font" para o site onde você deseja usar as icon fonts.

Após esta configuração, vamos escrever o código HTML, que é bem simples:

<p>
    <a href="#" class="iconfont facebook">Icon font</a>
</p>

No código CSS, vamos começar importando a fonte com o código fornecido pelo site Fontello:

@font-face {
    font-family: 'fonteteste';
    src: url('font/fonteteste.eot?29777742');
    src: url('font/fonteteste.eot?29777742#iefix') format('embedded-opentype'),
             url('font/fonteteste.woff?29777742') format('woff'),
             url('font/fonteteste.ttf?29777742') format('truetype'),
             url('font/fonteteste.svg?29777742#fonteteste') format('svg');
    font-weight: normal;
    font-style: normal;
}

O código acima é o melhor disponível atualmente para a importação de fontes. O valor de font-family, "fonteteste", é um nome que você pode mudar livremente para identificar a sua icon font no código CSS.

Depois disso, basta fazer uma base de CSS para as icon fonts:

.iconfont {
    text-decoration: none;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    transition: color 0.3s ease;
}

.iconfont:before {
    font-family: 'fonteteste';
    speak: none;
    display: inline-block;
    padding-right: 0.3em;
}

E associar a cada combinação de classe um ícone. Faremos isso com a inserção de conteúdo CSS, usando a propriedade content e os quatro caracteres que identificam o símbolo dentro da tabela de caracteres da fonte em Unicode (são aqueles códigos fornecidos no arquivo "demo.html"):

.iconfont.twitter:before {
    content: '\f309';
}

.iconfont.facebook:before {
    content: '\f30c';
}

Veja o exemplo final aqui

Por causa da flexibilidade das fontes sem perda de qualidade, esta técnica é muito útil para sites responsivos. Também não agrega muito peso ao site, já que a fonte geralmente fica abaixo dos 20kb, dependendo do número de símbolos escolhidos.

Esta técnica tem suporte nos seguintes navegadores:

• IE 9+
• Firefox 3.5+
• Chrome 4
• Safari 3.2+
• Opera 10+

Icon fonts usam as funcionalidades de inserção de conteúdo (propriedade content), pseudo-elementos (:before) e importação de fontes (@font-face). Por isso, o suporte de cada navegador dependerá se o programa consegue interpretar corretamente cada um destes recursos.