☰

從命令列對字體進行子集化並將其轉換為網頁字體

tag-icon • tag-icon command-line fonts
從命令列對字體進行子集化並將其轉換為網頁字體

我有一些連結到各種圖標字體的網頁項目（例如棒字體和字形）。這些都是很棒的字體，但它們包含許多我從未使用過的字形。對於您僅使用 4% 的內容來說，~65KB 是一個相對較大的下載。

可以對字體進行子集化，即僅包含您使用的字元。你可以透過以下方式做到這一點松鼠字體（可能還有其他）同時將 .OTF 轉換為您的網頁字型（適用於不同瀏覽器的 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 字元。我們將建立一個十六進位格式的字元清單0x####。識別這些只是透過我的.less文件選擇我用於 Font Awesome 的函數的情況，但您可以執行類似的操作來查找原始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字體。然後我們可以將其重新調整為一組網頁字體：

# 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

相關內容