4

Estava dando uma olhadinha no Font Awesome e no Bootstrap.
Eles usam um esquema de fontes para ícones:

No Font Awesome eu vi os seguintes arquivos:

  1. FontAwesome.otf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont.ttf
  5. fontawesome-webfont.woff

Ouvi falarem um pouco sobre imagens vetorizadas que permitem um redimensionamento sem perda de qualidade e que por ser uma espécie de fonte é também muito leve.

Bom, todos esses arquivos somam aproximadamente 592KB.

Para tentar entender um pouco mais como isso funciona, fiz um exemplo bem simples com o Font Awesome:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome</title>
    <link href="/static/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="container body-content">
        <h4><i class="fa fa-flag"></i> One Font, 479 Icons</h4>
        <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
        <h4><i class="fa fa-gamepad"></i> Plays Well with Others</h4>
    </div>
</body>
</html>

Que gerou:

exemplo gerado com font awesome

E analisando pelas ferramentas do Google Chrome pude ver que desses arquivos foi carregado apenas o fontawesome-webfont.woff.

Arquivos carregados do exemplo com Font Awesome, conforme Google Chrome

Então, nessa conversa que tive onde tentaram me explicar, disseram que os ico-fonts estão no arquivo svg, no caso, fontawesome-webfont.svg.

  1. O que é cada arquivo desses?
  2. Qual a vantagem em se utilizar ico-fonts (se o termo estiver errado, estou me referindo ao método utilizado pelo Font Awesome e que parece ser o mesmo usado pelo Bootstrap)?
  3. Quais as desvantagens?
  4. Porque somente o arquivo fontawesome-webfont.woff foi carregado.
  5. No momento não me recordo qual e onde, mas baixei um pacote que continha apenas arquivos .svg e cada arquivo continha apenas um icon. Uma das formas que encontrei para usá-las foi com a tag <img>, mas tanto o Font Awesome quanto o Bootstrap usam algo como:

    .fa-arrows-v:before {
      content: "\f07d";
    }
    .fa-arrows-h:before {
      content: "\f07e";
    }
    

    5.1 Quais as vantagens em usar dessa forma?

    5.2 Ter um arquivo css com várias declarações assim não significa ter muito carregamento desnecessário, ou seja, são todos os ícones listados no arquivo de css carregados para o client mesmo que ele vá usar apenas um? Ou todo arquivo de icon-fonts será sempre carregado por completo mesmo?

Minha preocupação maior é com desempenho.

0

1 Resposta 1

3

1. Cada arquivo desse é correspondente a uma extensão de tipo de fontes.

2. A maior vantagem é sua fácil reaplicação em qualquer lugar do site. Por ex: Se você tem um ícone na home de 15x15 e o mesmo ícone em uma interna de 30x30 você só precisa mudar seu tamanho e não precisa salvar 2 ícones com tamanho diferentes.

3. Ainda não encontrei nenhuma desvantagem, pelo ao contrário, já até criei minhas próprias fontes usando a ferramenta do IcoMoon. Da uma pesquisada pois não consegui inserir o link aqui.

4. Nesse caso só carregou o WOFF porque o Google Chrome prefere esse formato. Outros navegadores e sistemas operacionais, como Windows, utilizam outras extensões de fontes, por esse motivo que existem esses 4 formatos alem do WOFF: .eot, .ttf, .otf, .svg.

5. Provávelmente esse pacote de fontes que baixou não está formatado para usar como fonticons. De uma olhada no IcoMoon que você irá compreender melhor.

5.1 Essa é a maneira correta que essas bibliotecas de fontes trabalham.

5.2 Não concordo que seja carregamento desnecessário. Mas não custa customizar para sua necessidade. Eu normalmente crio minhas fontes então elas atendem bem a minha necessidade.

Espero ter esclarecido suas dúvidas. Qualquer outra dúvida escreve ai que te respondo.

Complementando após pensar mais sobre o assunto e ler algumas referências...

Atualmente nós temos 4 formatos de fontes em uso na web: EOT, TTF, WOFF e WOFF2. Apesar da grande gama de escolhas não há um formato universal que funcione em todos os navegadores modernos e mais antigos: EOT por exemplo só funciona no IE, TTF tem apoio parcial do IE, WOFF é a extensão que tem mais apoio dos navegadores, mas não está disponível em alguns navegadores antigos e WOFF 2.0 está em andamento para atender muitos navegadores.

Qual a conclusão disso?

Não há um único formato que funcione em todos os navegadores, o que significa que temos entregar vários formatos para oferecer uma experiência consistente.

  • WOFF 2.0 para navegadores que a suportam
  • WOFF para a maioria dos navegadores
  • TTF para o antigo Android (abaixo da versão 4.4) dos navegadores
  • EOT para o velho IE (abaixo da versão IE9) dos navegadores

Esqueci de mencionar o SVG na conclusão. Tecnicamente existe o recipiente de fonte SVG mas nunca foi apoioda pelo IE ou Firefox e está obsoleto no Google Chrome. O uso do SVG é limitado e futuramente irá desaparecer.

4
  • Se quiser editar sua resposta, o Chrome carregou a fonte que late (woff) 10/12/2014 às 10:38
  • @BrunoAugusto Editei e complementei minhas resposta. Obrigado.
    – codajoao
    10/12/2014 às 11:50
  • Uma dúvida: No item 4, estar em ambiente Windows pode influenciar na fonte? Não seria somente o tipo de fonte usado pelo Internet Explorer? 10/12/2014 às 12:17
  • @renan Influenciar em que sentido?
    – codajoao
    10/12/2014 às 12:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .