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:
- FontAwesome.otf
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- 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:
E analisando pelas ferramentas do Google Chrome pude ver que desses arquivos foi carregado apenas o fontawesome-webfont.woff.
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.
- O que é cada arquivo desses?
- 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)?
- Quais as desvantagens?
- Porque somente o arquivo fontawesome-webfont.woff foi carregado.
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.