☰

コマンドラインからフォントをサブセット化し、それをウェブフォントに変換する

tag-icon • tag-icon command-line fonts
コマンドラインからフォントをサブセット化し、それをウェブフォントに変換する

さまざまなアイコンフォントにリンクするWebプロジェクトがいくつかあります（たとえばフォントオーサムそしてグリフィコン）。これらは素晴らしいフォントですが、私が決して使わないグリフがたくさん含まれています。約 65 KB は、4% しか使わないもののダウンロードとしては比較的大きいです。

フォントをサブセット化して、使用する文字だけを含めることもできます。これを行うには、フォントリス(おそらく他にも) .OTF を Web フォント (さまざまなブラウザー用の EOT、WOFF2、WOFF、TTF、SVG のパック) に変換する際に使用します。これは非常にうまく機能します。

私は通常、プロジェクトの最後にそれを行います...一度... しかし、文字の範囲が変わると、プロセス全体をもう一度やり直す必要があります。そして、それは完全に手作業です。そして面倒です。

必要な文字のリストを生成できるので、フォントをサブセット化できるものがあれば十分です（そしてボーナスポイントとして、ウェブフォントパックを生成する）。Fontforge を使えばすべてが可能だと思いますが (スクリプト API があります)、私はその経験がありません。

答え1

これは当初考えていたよりも大きなものです。すべてを実行するには、いくつかの追加ツールが必要ですが、その一部は Ubuntu 用に適切にパッケージ化されていません。~/src/システムにインストールするのではなく、カスタム インストール (おそらく作成する必要があるでしょう) を実行しています。これは、作業を完了するにはそれで十分だからです。

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 -

次のステップは、必要な Unicode 文字を特定することです。16 進形式で文字のリストを作成します0x####。これらを特定するには、Font Awesome で使用する関数のファイルを調べるだけです.lessが、生のグループを探すのにも同様のことができますcontent: "..."。

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

これでリストができたので、FontForge にサブセット化するように指示できます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

これにより、新しい.otfフォントが作成されます。その後、それを Web フォントのセットに再調整できます。

# 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

結果的にフォントセットは大幅に小さくなりました。以下は並べて比較した画像です。

-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

関連情報