Ich habe ein paar Webprojekte, die auf verschiedene Icon-Schriftarten verweisen (wieSchriftartAwesomeUndGlyphicons). Das sind tolle Schriftarten, aber sie enthalten viele Glyphen, die ich nie verwende. ~65 KB ist ein relativ großer Download für etwas, von dem Sie nur 4 % verwenden.
Es ist möglich, Schriftarten zu subsetieren, d. h. nur die Zeichen einzuschließen, die Sie verwenden. Sie können dies tun durchSchriftart Squirrel(und wahrscheinlich auch andere), während Sie eine .OTF-Datei in Ihre Webfonts konvertieren (ein Paket aus EOT, WOFF2, WOFF, TTF und SVG für verschiedene Browser). Das funktioniert großartig.
Normalerweise mache ich das direkt am Ende eines Projekts ...Einmal... Wenn sich Ihr Zeichenumfang jedoch ändert, müssen Sie den gesamten Vorgang erneut durchführen. Und das alles erfolgt komplett manuell. Und es ist mühsam.
Ich kann eine Liste der benötigten Zeichen generieren, sodass ich nur noch etwas brauche, das die Schriftart unterteilen kann (und dann für Bonuspunktegeneriert das Webfonts-Paket). Ich vermute, dass das Ganze über Fontforge möglich ist (es hat Skript-APIs), aber ich habe damit keine Erfahrung.
Antwort1
Das ist größer, als ich ursprünglich dachte. Um das Ganze zu erledigen, brauchen wir einige zusätzliche Tools und einige davon sind nicht gut für Ubuntu gepackt. Ich führe die benutzerdefinierten Installationen durch ~/src/– die Sie wahrscheinlich erstellen müssen – anstatt sie auf dem System zu installieren, schon allein, weil das gut genug ist, um die Aufgabe zu erledigen.
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 -
Der nächste Schritt besteht darin, herauszufinden, welche Unicode-Zeichen wir benötigen. Wir werden eine Liste von Zeichen im Hex-Format erstellen 0x####. Um diese zu identifizieren, müssen Sie nur meine Datei nach der Funktion durchsuchen, die .lessich für Font Awesome verwende. Sie können jedoch auch etwas Ähnliches tun, um nach Rohgruppen zu suchen content: "...":
perl -n -e '/\.font-awesome..(\w+)/ && print "0xf$1\n"' less/*.less | tail -n+2 | sort -u
Da wir nun die Liste haben, können wir FontForge anweisen, eine Teilmenge davon bereitzustellen 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
Dadurch wird eine neue .otfSchriftart erstellt. Diese können wir dann in einen Satz von Webfonts umwandeln:
# 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
Das Ergebnis ist ein viel kleinerer Satz an Schriftarten. Hier ist der Vergleich nebeneinander:
-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