Tenho alguns projetos da web vinculados a várias fontes de ícones (comoFonte incríveleGlifos). Essas são ótimas fontes, mas incluem muitos glifos que nunca uso. ~ 65 KB é um download relativamente grande para algo que você usa apenas 4%.
É possível criar subconjuntos de fontes, ou seja, incluir apenas os caracteres que você usa. Você pode fazer isso atravésEsquilo de fonte(e provavelmente outros) ao converter um .OTF em suas webfonts (um pacote de EOT, WOFF2, WOFF, TTF e SVG para diferentes navegadores). Isso funciona muito bem.
Geralmente faço isso logo no final de um projeto...Uma vez... Mas se o seu leque de personagens mudar, você terá que passar por todo o processo novamente. E é totalmente manual. E tedioso.
Posso gerar uma lista de caracteres necessários, então tudo que preciso é algo que possa subdividir a fonte (e, para ganhar pontos extras,gera o pacote webfonts). Suspeito que tudo isso seja possível através do Fontforge (possui APIs de script), mas não tenho experiência com isso.
Responder1
Isso é maior do que eu pensava originalmente. Para fazer tudo isso, precisamos de algumas ferramentas extras e algumas não estão bem empacotadas para o Ubuntu. Estou fazendo as instalações personalizadas ~/src/- que você provavelmente precisará criar - em vez de instalar no sistema, mesmo porque isso é Bom o Suficiente™ para realizar o trabalho.
sudo apt-get install fontforge python-scour woff-tools build-essential
git clone http://github.com/behdad/fonttools ~/src/fonttools
ln -s ~/src/fonttools/Tools/pyftsubset ~/bin/subset # vanity symlink
git clone https://github.com/metaflop/ttf2eot.git ~/src/ttf2eot
cd ~/src/ttf2eot
make
cd -
git clone --recursive https://github.com/google/woff2.git ~/src/woff2
cd ~/src/woff2
make clean all
cd -
A próxima etapa é descobrir quais caracteres Unicode precisamos. Vamos construir uma lista de caracteres no formato hexadecimal 0x####. Identificá-los é apenas uma questão de escolher em meu .lessarquivo a função que uso para Font Awesome, mas você poderia fazer algo semelhante procurando por content: "..."grupos brutos:
perl -n -e '/\.font-awesome..(\w+)/ && print "0xf$1\n"' less/*.less | tail -n+2 | sort -u
Agora que temos a lista, podemos dizer ao FontForge para subconjunto FontAwesome.otf:
~/src/fonttools/Tools/pyftsubset fonts/FontAwesome.otf \
--unicodes-file=<(perl -n -e '/\.font-awesome..(\w+)/ && print "0xf$1\n"' less/sbnew-*.less\
| tail -n+2 | sort -u) --output-file=fonts/fa-subset.otf --no-recommended-glyphs --no-hinting
Isso cria uma nova .otffonte. Podemos então recondicionar isso em um conjunto de webfonts:
# generate TTF and SVG
fontforge -lang=pe -script <(echo -e 'Open($1)\nGenerate($1:r + ".ttf")\nGenerate($1:r + "big.svg")') fonts/fa-subset.otf
# Clean up SVG
scour -i fonts/fa-subset.big.svg -o fonts/fa-subset.svg --enable-id-stripping --enable-comment-stripping --shorten-ids
# Create WOFF
sfnt2woff fonts/fa-subset.otf
# Create WOFF2 for most modern browsers
~/src/woff2/woff2_compress fonts/fa-subset.ttf
# Create EOT (eotfast might be better)
~/src/ttf2eot/ttf2eot fonts/fa-subset.ttf > fonts/fa-subset.eot
O resultado é um conjunto muito menor de fontes. Aqui está a comparação lado a lado:
-rw-r--r-- 1 oli oli 62K Dec 11 2013 FontAwesome.otf
-rw-rw-r-- 1 oli oli 2.0K Aug 27 15:16 fa-subset.otf
-rwxr-xr-x 1 oli oli 38K Dec 11 2013 fontawesome-webfont.eot
-rw-rw-r-- 1 oli oli 3.1K Aug 27 15:31 fa-subset.eot
-rwxr-xr-x 1 oli oli 198K Dec 11 2013 fontawesome-webfont.svg
-rw-rw-r-- 1 oli oli 4.4K Aug 27 15:37 fa-subset.svg
-rwxr-xr-x 1 oli oli 79K Dec 11 2013 fontawesome-webfont.ttf
-rw-rw-r-- 1 oli oli 2.9K Aug 27 15:22 fa-subset.ttf
-rwxr-xr-x 1 oli oli 44K Dec 11 2013 fontawesome-webfont.woff
-rw-rw-r-- 1 oli oli 1.9K Aug 27 15:25 fa-subset.woff
-rw-rw-r-- 1 oli oli 1.4K Aug 27 16:01 fa-subset.woff2