web-dev-qa-db-fra.com

Sous-définir une police à partir de la ligne de commande et la transformer en webfont

J'ai quelques projets Web qui se lient à différentes polices d'icônes (comme FontAwesome et Glyphicons ). Ce sont des polices géniales mais elles contiennent beaucoup de glyphes que je n’utilise jamais. ~ 65 Ko est un téléchargement relativement important pour quelque chose que vous n'utilisez que 4%.

Il est possible de sous-définir les polices, c'est-à-dire d'inclure uniquement les caractères que vous utilisez. Vous pouvez le faire par le biais de Font Squirrel (et probablement d’autres) tout en convertissant un .OTF en vos polices Web (un pack d’EOT, WOFF2, WOFF, TTF et SVG pour différents navigateurs). Cela fonctionne très bien.

Je le fais habituellement directement à la fin d'un projet ... Une fois ... Mais si votre gamme de caractères change, vous devez passer par le processus entier à nouveau. Et c'est complètement manuel. Et fastidieux.

Je peux générer une liste de caractères dont j'ai besoin, de sorte que tout ce dont j'ai besoin est de pouvoir sous-traiter la police (puis pour les points bonus, génère le pack webfonts ). Je suppose que tout est possible grâce à Fontforge (qui possède des API de script), mais je n’ai aucune expérience dans ce domaine.

command-linefonts
5
Oli

C'est plus grand que je pensais à l'origine. Pour faire tout cela, nous avons besoin d’outils supplémentaires et certains ne sont pas bien emballés pour Ubuntu. Je fais les installations personnalisées dans ~/src/ —que vous devrez probablement créer — plutôt que de les installer sur le système, ne serait-ce que parce que c'est une bonne idée de faire le travail.

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 -

La prochaine étape consiste à déterminer les caractères unicode dont nous avons besoin. Nous allons construire une liste de caractères au format hexadécimal 0x####. Identifier ces éléments n’est qu’un cas de sélection dans mon fichier .less pour la fonction que j’utilise pour Font Awesome, mais vous pouvez faire quelque chose de similaire en recherchant des groupes content: "..." bruts:

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

Maintenant que nous avons la liste, nous pouvons dire à FontForge de créer le sous-ensemble 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

Cela crée une nouvelle police .otf. Nous pouvons ensuite reconditionner cela dans un ensemble 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

Le résultat est un ensemble de polices beaucoup plus petit. Voici la comparaison côte à côte:

-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
12
Oli