![从命令行设置字体子集并将其转换为 Web 字体](https://linux22.com/image/977239/%E4%BB%8E%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%E5%AD%90%E9%9B%86%E5%B9%B6%E5%B0%86%E5%85%B6%E8%BD%AC%E6%8D%A2%E4%B8%BA%20Web%20%E5%AD%97%E4%BD%93.png)
我有几个网络项目链接到各种图标字体(例如FontAwesome和字形图标)。这些都是很棒的字体,但它们包含很多我从未使用过的字形。对于您只使用 4% 的内容来说,~65KB 是一个相对较大的下载量。
可以对字体进行子集化,即仅包含您使用的字符。您可以通过以下方式执行此操作字体松鼠(可能还有其他)同时将 .OTF 转换为您的 webfonts(适用于不同浏览器的 EOT、WOFF2、WOFF、TTF 和 SVG 包)。效果很好。
我通常在项目结束时这样做......一次...但如果你的字符范围发生变化,你就必须重新经历整个过程。而且这是完全手动的。而且很乏味。
我可以生成我需要的字符列表,所以我所需要的只是一些可以对字体进行子集处理的东西(然后为了获得加分,生成 webfonts 包)。我怀疑整个过程可以通过 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
字体。然后我们可以将其重新调整为一组 webfont:
# 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