主页 / ubuntu / 问题 / 557980
Accepted
Oli
Asked: 2014-12-09 03:25:54 +0800 CST

从命令行子集字体并将其转换为网络字体

  • 772

我有几个链接到各种图标字体（如FontAwesome和Glyphicons）的网络项目。这些字体很棒，但其中包含许多我从未使用过的字形。~65KB 对于你只使用 4% 的东西来说是一个相对较大的下载。

可以对字体进行子集化，即仅包含您使用的字符。您可以通过Font Squirrel（可能还有其他公司）完成此操作，同时将 .OTF 转换为您的网络字体（用于不同浏览器的一组 EOT、WOFF2、WOFF、TTF 和 SVG）。这很好用。

我通常在项目结束时这样做……一次……但是如果你的角色范围发生变化，你必须重新经历整个过程。而且它完全是手动的。而且乏味。

我可以生成我需要的字符列表，所以我需要的只是可以对字体进行子集化的东西（然后为了奖励积分，生成 webfonts pack）。我怀疑所有事情都可以通过 Fontforge（它有脚本 API）实现，但我没有这方面的经验。

command-line

1 个回答

  1. Best Answer

    这比我原先想象的要大。要完成整个工作，我们需要一些额外的工具，有些工具没有为 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
    • 13

相关问题