☰

Подстановка шрифта из командной строки и превращение его в веб-шрифт

tag-icon • tag-icon command-line fonts
Подстановка шрифта из командной строки и превращение его в веб-шрифт

У меня есть несколько веб-проектов, которые ссылаются на различные шрифты-иконки (например,FontAwesomeиГлификоны). Это отличные шрифты, но они включают в себя много глифов, которые я никогда не использую. ~65 КБ — это довольно большой размер для загрузки, если учесть, что вы используете только 4%.

Можно подмножество шрифтов, то есть включать только те символы, которые вы используете. Вы можете сделать это черезШрифт Белка(и, возможно, другие) при конвертации .OTF в ваши веб-шрифты (пакет EOT, WOFF2, WOFF, TTF и SVG для разных браузеров). Это работает отлично.

Обычно я делаю это в самом конце проекта...Один раз... Но если ваш набор символов изменится, вам придется пройти весь процесс заново. И это полностью вручную. И утомительно.

Я могу сгенерировать список нужных мне символов, поэтому все, что мне нужно, это что-то, что может разделить шрифт (и затем, за бонусные баллы,генерирует пакет веб-шрифтов). Я подозреваю, что все это возможно через Fontforge (у него есть API для написания скриптов), но у меня нет с этим опыта.

решение1

Это больше, чем я изначально думал. Чтобы сделать все это, нам нужны некоторые дополнительные инструменты, и некоторые из них не очень хорошо упакованы для Ubuntu. Я делаю пользовательские установки в ~/src/— которые вам, вероятно, придется создать — вместо установки в систему, хотя бы потому, что это Good Enough™ для выполнения работы.

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

Связанный контент