@font-face: Usando fonte no lugar de imagens

[rnxn 2]

@FONT-FACE

 

Segundo MAUJOR:

"A diretiva @font-face das CSS3 (...) destina-se a especificar um tipo de fonte para uso em determinadas partes de uma página ou na página toda (ou no site todo) e ter a garantia que a fonte especificada será renderizada no navegador do usuário independentemente de ele ter ou não a fonte instalada em seu sistema operacional." -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

Antigamente, se você codificava um site usando uma fonte personalizada, para que o cliente a visualizasse ele teria que tê-la instalada no computador. Tendo por exemplo, no seu CSS:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Aconteceria o seguinte: O usuário acessaria a página, o navegador tentaria renderizá-la usando a fonte "MinhaFonteMagica". Se o usuário não tivesse a fonte instalada no computador a página seria renderizada com a próxima (no caso "Comis Sans MS") e assim por diante.

 

Um usuário de MAC, por exemplo, não veria a fonte "comic sans MS" e provavelmente veria a página diferente daquilo que você esperava.

 

Com a chegada das CSS3 as coisas melhoraram e agora é possível usar qualquer fonte da seguinte forma: Ao acessar uma página onde a fonte foi definida usando font-face, se o cliente não tiver ela instalada o navegador fará o download da fonte e irá renderizar a página com ela. Atualmente, todos os navegadores (com exceção do Opera Mini) tem suporte ao uso dessa diretiva -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

Para definir uma fonte usando @font-face é simples:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Exemplo:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

A única "desvantagem" é que qualquer um pode acessar a fonte, por isso em alguns casos você precisa PAGAR por uma licença.

Recomendo ler o artigo do MAUJOR sobre os formatos de fonte e valores:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

No tutorial a seguir, vamos baixar uma fonte (em formato de ícones) e aplicá-la em uma página.

 

BAIXANDO A FONTE

Existem vários sites na internet em que é possível procurar por fontes e realizar o download. Muitos deles possuem fontes gratuitas, onde qualquer pessoa pode usar. Um exemplo é a fonte usada pelo twitter (Font Awesome), todos aqueles ícones exibidos no twitter são fontes e podem estar na sua página/aplicação também.

 

Um site que considero muito bom é o ICOMOON -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

- devido a grande quantidade de fontes gratuitas e a variedade dos ícones. Outro ponto interessante é que o site gera um arquivo .ZIP/.RAR contendo o arquivo da fonte e o CSS já pronto, configurado para aplicar os ícones.

 

Entre no link acima e escolha qualquer ícone de qualquer pacote de fontes, a quantidade que quiser e deseja usar no seu projeto. Feito isso, clique em "font" na parte inferior:

 

Na sequência você pode escolher um nome para o ícone e um código para o mesmo (as duas informações já tem preenchidas, mas você pode alterar). Esse código será usado assim: Sempre que o código for encontrado ele será substituido pelo ícone, mais à frente veremos isso.

 

 

 

Depois de preenchido, antes de clicar em download procure na parte superior da página por "preferences".

 

 

 

Aqui podemos alterar o nome da fonte, não é algo muito relevante para nós.

 

Os ícones gerados pelo site serão classes. Para distinguirmos o que é ícone dos demais podemos escolher algum prefixo para usar na classe. Por exemplo, ícones terão um prefixo "ico-", "icon-", "icone-", "meu-icone-fantastico-", etc. Assim, posteriormente podemos usá-los assim:

ico-seta

ico-curtir

ico-youtube

...

Também é possivel escolher se você quer dar suporte a navegadores IE antes da versão 7. Só para constar, eu nunca marco essa opção, o usuário que atualize o navegador que ele usa, navegadores antes do IE7 é fo** para dar suporte, basta procurar na internet os motivos...

 

Pronto, basta fazer o download e extrair os arquivos.

 

 

ESTUDANDO O ARQUIVO BAIXADO

 

Depois de baixado, abra o arquivo "style.css" em um bloco de notas (ou IDE, Notepad++, etc). Teremos o seguinte:

 

 

Note que toda definição da fonte já foi gerada com as preferências que escolhemos no site. O nome da minha fonte é "icomoon", tudo certo.

Atenção no seletor [class^=ico-], [class*=ico-] : Para qualquer tag no HTML em que for aplicada uma classe iniciando por "ico-" (foi o prefixo que escolhi lá no site) ela terá as regras especificadas. Exemplo: <p class="ico-meuicone">UAU!</p>

 

Um pouco mais abaixo temos os códigos da fonte.

 

 

Cada ícone tem um código. Então vamos pensar:

- Quando usarmos "ico-ALGUMACOISA" será inserido um código antes (por ser ::before) da tag na qual ele foi aplicado.

- Dizemos nas regras que, para toda tag contendo uma classe iniciada pelo prefixo "ico-" será aplicada a fonte "icomoon".

- No arquivo da fonte "icomoon", sempre que for encontrado um código (por exemplo: "\e600") ele será substituido por um ícone que corresponde àquele valor.

 

 

COLOCANDO EM PRÁTICA

 

Como dito anteriormente, site gera um arquivo CSS automaticamente contendo os seletores e as propriedades prontas para o uso, junto à uma pasta contendo todos os arquivos de fonte (EOT, SVG, Truetype e WOFF). Esse arquivo (style.css) pode ser editado e todas as regras da página podem ser escritas nele, ou então, você pode mantê-lo somente com as fontes e usar um outro arquivo CSS para estilizar a sua página (que é o que eu prefiro e farei nesse tutorial).

 

Então, abra o bloco de notas (ou use um IDE) e crie um arquivo com extensão CSS, dê o nome que quiser. Chamarei o meu de "meucss.css".

Em seguida crie um documento com extensão HTML contendo uma estrutura básica (como na imagem a seguir):

 

 

Note que já importei os dois arquivos CSS que usaremos: O que baixamos do site (style.css) e o -ainda- vazio que acabemos de criar (meucss.css).

 

Você pode usar os ícones (fontes) como quiser na sua página, nesse tutorial eu criarei um menu de navegação simples. Supondo que o meu menu seja para algum site de check-in ou algo semelhante, a estrutura será essa:

 

 

Note que em todos os hyperlinks/âncoras estou usando aquelas classes que foram geradas no arquivo "style.css". Inserindo essas classes, o código definido no arquivo css (cada ícone tem um código especifico) será inserido antes do conteúdo, isto é, o ícone ficará na frente do texto do hyperlink.

 

Se executarmos documento HTML agora teremos o seguinte resultado:

 

 

Não é uma aparência bonita, mas o importante é que os ícones apareceram. Caso não tenha aparecido (esteja exibindo um quadrado com um código), verifique se colocou a pasta "fonts" (gerada pelo site) no mesmo diretório do documento HTML e CSS que estamos editando.

 

Já fizemos o que queríamos, agora vamos melhorar a aparência e fazer com que essa estrutura torne-se algo mais atrativo. Primeiro, tornando essa estrutura um bloco na vertical e dando uma aparência melhor para o texto:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Como resultado teremos:

 

Como os ícones e o texto estão dentro da mesma estrutura, ambos terão a mesma cor (e também ficarão "colados" ao texto). Vamos dar um espaçamento e alterar somente a cor dos ícones:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Como resultado:

 

 

 

Para finalizar, um efeito para quando o usuário passar o cursor do mouse sobre o item, ele ser destacado:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Resultado:

 

 

 

Está pronto. Eu nem ia estilizar o menu pois a parte importante do tópico era o @font-face.

Está ai, como dica. Use menos imagens nos seus sites, isso pode pesar bastante usado em excesso. Para ícones: use fontes, o desempenho aumenta consideravelmente, é muito mais rápido carregar uma fonte do que uma imagem de 'n'MB...

 

Qualquer dúvida relacionado ao uso de @font-face ou sobre as propriedades usada no css (ou html), basta usar esse tópico para perguntar.

 

CÓDIGO:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

|

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

|

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

</ rnxn >

[Owner 7]

Ótimo tutorial rnxn. É melhor que usar a própria <img> e fica até mais bonito,

Adorei esse site :3 eu usava o iconfinder, que também é ótimo!

[rnxn 2]

Ótimo tutorial rnxn. É melhor que usar a própria <img> e fica até mais bonito,

Adorei esse site :3 eu usava o iconfinder, que também é ótimo!

 

Pra falar a verdade, acho que esse negócio de usar imagens .png, .gif, .jpg na web vai acabar :/

É muito ruim adaptar uma imagem para um dispositivo móvel ou uma TV sem perder a qualidade. Ja é possível substituir o .gif com animações em css3 puro e a onda agora é imagens vetoriais (SVG). Antigamente era difícil fazer um circulo, hoje se faz em 1 linha:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

[I~Johnnie 28]

Obrigado por compartilhar, só queria pedir se você quiser é claro, de deixar meio que Open Source, quero dar uma arrumada, eu copiei das imagens, mas é chato neh, mas ta valendo pois ficou um ótimo tutorial <3

[rnxn 2]

O código está no final do tópico.

 

Não entendi a parte em que fala de imagens.A quais imagens se refere se não usei nenhuma?

[I~Johnnie 28]

Não erro meu, quando clicava em cima pra copiar aparecia salvar imagem, aí agora que deu certo '-' meu computador ficou possuído...