Subconjunto de uma fonte a partir da linha de comando e transformando-a em um webfont

Question

Eu tenho alguns projetos da web que se vinculam a várias fontes de ícones (como FontAwesome e Glyphicons ). Essas são ótimas fontes, mas elas incluem muitos glifos que eu nunca uso. ~ 65KB é um download relativamente grande para algo que você usa apenas 4% de.

É possível subdividir fontes, que incluem apenas os caracteres que você usa. Você pode fazer isso através de Font Squirrel (e provavelmente outros) ao converter um .OTF em seus webfonts (um pacote de EOT, WOFF2, WOFF, TTF e SVG para diferentes navegadores). Isso funciona muito bem.

Geralmente faço isso no final de um projeto ... Uma vez ... Mas se o seu intervalo de caracteres mudar, você terá que passar por todo o processo novamente. E é completamente manual. E tedioso.

Eu posso gerar uma lista de caracteres que eu preciso, então tudo que eu preciso é algo que possa subconjunto da fonte (e então para pontos de bônus, gera o pacote de webfonts ). Eu suspeito que a coisa toda é possível através do Fontforge (tem APIs de script), mas eu não tenho experiência com isso.

    

Answer 1

Isso é maior do que eu pensava inicialmente. Para fazer a coisa toda, precisamos de algumas ferramentas extras e algumas não são bem empacotadas para o Ubuntu. Estou fazendo as instalações personalizadas em ~/src/ - que você provavelmente precisará criar - em vez de instalar no sistema, apenas porque isso é Good Enough ™ 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 -

O próximo passo é descobrir quais são os caracteres unicode que precisamos. Nós vamos construir uma lista de caracteres no formato hexadecimal 0x#### . Identificar estes é apenas um caso de escolher através do meu arquivo .less para a função que eu uso para o Font Awesome, mas você poderia fazer algo similar procurando por% raw content: "..." groups:

perl -n -e '/\.font-awesome..(\w+)/ && print "0xf\n"' less/*.less | tail -n+2 | sort -u

Agora 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\n"' less/sbnew-*.less\
| tail -n+2 | sort -u) --output-file=fonts/fa-subset.otf --no-recommended-glyphs --no-hinting

Isso cria uma nova fonte .otf . Podemos então recondicionar isso em um conjunto de webfonts:

# generate TTF and SVG
fontforge -lang=pe -script <(echo -e 'Open()\nGenerate(:r + ".ttf")\nGenerate(: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