Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Перевод статьи Зака Лезермана о разработанном инструменте, который оптимизирует шрифты (убирая лишние глифы) и создающем WOFF и WOFF2 файлы для повышенной совместимости.

Передаю слово Заку.

Эй, ты! Да, ты!

Я хочу рассказать тебе об одном секрете… Об одном охраняемом и малоизвестном секрете, о котором можно услышать в кулуарных беседах шепотом на конференциях по производительности в вебе. Трюк с производительностью, который поднимет уровень вашей работы с шрифтами на новый уровень.

Секрет очень близко — вы готовы постичь тайну? Небольшие по размеру шрифтовые файлы загружаются быстрее. Да, я знаю, знаю — это страшная тайна.

Видя ваше разочарование, спешу сказать вам — хорошо, это не так революционно и тайно, как я сначала сказал. Но это полезно.

На практике не всегда получается сделать шрифт более мелкого размера. Наиболее простым методом является использование сжатых файлов веб-шрифтов типа WOFF2 и его предшественника WOFF (для совместимости).

Есть ещё один, менее известный, но очень полезный вариант — и о нём я хочу рассказать вам в этой статье — это удаление потенциально ненужных символов из файла шрифта. Этот процесс называется subsetting (от переводчика — не совсем понял, как правильно перевести в данном случае, возможно, что разложение).

Subsetting

Возьмем для примера самый популярный шрифт на Google Fonts — Roboto. Для проведения эксперимента мы загрузим его неоптимизированную версию из репозитория GitHub (но вы можете загрузить его и из Google Fonts).

В архиве roboto-android.zip содержится Roboto-Regular.ttf — полностью неоптимизированную версию шрифта для ПК. Он весит 306 КБ и включает в себя 3 359 отдельных глифов (согласно Font Drop). Это здоровенный шрифт. В том смысле, что вес самого файла в килобайтах очень большой (мы не используем жирный вариант шрифта, без которого .

Font Drop также сообщает, что шрифт Roboto поддерживает 40 языков: Африкаанс, Албанский, Азербайджанский, Белорусский, Боснийский, Болгарский, Каталанский, Хорватский, Чешский, Датский, Голландский, Английский, Эстонский, Финский, Французский, Немецкий, Греческий, Венгерский, Исландский, Итальянский, Латышский, Литовский, Македонский, Мальтийский, Норвежский, Осетинский, Польский, Португальский, Румынский, Русский, Сербский, Словацкий, Словенский, Испанский, Шведский, Турецкий, Украинский, Узбекский, Вьетнамский, Зулу.

Давайте будем честными и ответим на вопрос — все ли языки нужны для вашего сайта? Будут ли они использоваться в ваших статьях или может их носители отметятся в комментариях на своем родном языке?

Используем glyphhanger

Мы можем проверить с помощью разработанного нами инструмента под названием glyphhanger, для того, чтобы проверить, какие глифы используются на нашем сайте.

Установим glyphhanger с GitHub или npm.

npm install -g glyphhange

В самом простом случае glyphhanger может по указанному url-адресу составить отчет по использованном на нем контенте. Для примера (не включайте $, если вы копируете эти команды):

$ glyphhanger https://www.filamentgroup.com/
U+20,U+21,U+26,U+28,U+29,U+2B-38,U+3A,U+3F-47,U+49,U+4C-50,U+52-55,U+57-5A,U+61-70,U+72-77,U+79,U+7C,U+A9,U+DC,U+2014,U+2019,U+25A2

Давайте возьмем Roboto-Regular.ttf.

Для использования функциональных возможностей в glyphhanger требуется установить fonttools, проект на Python. В проекте glyphhanger в файле readme содержатся инструкции по установке для Mac.

$ glyphhanger https://www.filamentgroup.com/ --subset=Roboto-Regular.ttf --formats=woff2,woff
Subsetting Roboto-Regular.ttf to Roboto-Regular-subset.woff (was 298.45 KB, now 14.09 KB)
Subsetting Roboto-Regular.ttf to Roboto-Regular-subset.woff2 (was 298.45 KB, now 10.63 KB)

Обратите внимание, что в приведенном выше примере —formats = woff2, woff означает вывод как файла подмножества WOFF, так и WOFF2. Допустимые параметры: woff2, woff, woff-zopfli (для лучшего сжатия WOFF по сравнению с woff) и ttf.

Расширяем границы — оцениваем весь сайт

Приведенный пример отлично работает для проверки одной страницы на сайте. Но нам необходимо сделать такой шрифтовой набор, который будет удовлетворять потребностям всех страниц сайта, а не только главной страницы.

Есть несколько вариантов как это сделать:

• Передать несколько URL-адресов
• Использование glyphhanger Spider для поиска URL-адресов
• Использовать белый лист символов или диапазон юникода

Давайте рассмотрим несколько примеров:

Передаем несколько URL-адресов

$ glyphhanger https://www.filamentgroup.com/
https://www.filamentgroup.com/code/

Использование glyphhanger Spider для поиска URL-адресов

Используйте опцию —spider, чтобы найти все значения атрибута [href], содержащие локальные URL-адреса.

$ glyphhanger https://www.filamentgroup.com/ --spider --spider-limit=10

Настройте максимальный предел с помощью —spider-limit (по умолчанию 10).

Использование «Белого листа»

Используйте опцию —whitelist для перехода в диапазон Unicode или список символов, которые вы хотите включить по умолчанию, в дополнение к любым URL-адресам, которые интерпретируются. На момент написания статьи glyphhanger (v3.0) также включает ярлыки для -US_ASCII и -LATIN.

Использование —whitelist делает аргумент URL необязательным.

$ glyphhanger --whitelist="ABCD"
U+41-44

$ glyphhanger --US_ASCII
U+20-7E

Давайте дополним наш шрифт Roboto, используя белый список:

$ glyphhanger --whitelist="U+20-7E" --subset=Roboto-Regular.ttf --formats=woff2
U+20-7E
Subsetting Roboto-Regular.ttf to Roboto-Regular-subset.woff2 (was 298.45 KB, now 10.78 KB)

Отлично, правда?

Подмена определенного семейства шрифтов

Предположим, вместо Roboto у нас есть определенный шрифт monospace web, который мы хотели бы использовать в наших блоках кода и выделенном синтаксисе кода на нашем сайте. Диапазон Unicode для содержания моноширинного кода может сильно отличаться от символов, используемых для другого контента на нашем сайте. Glyphhanger может помочь и здесь — мы передадим через запятую список из одного или нескольких имен семейства шрифтов, чтобы получить только содержимое в узлах, используя эти значения семейства шрифтов.

$ glyphhanger --family='Consolas,monospace' https://www.filamentgroup.com/lab/preload-ctm.html
U+A,U+20-22,U+26,U+28,U+29,U+2B-30,U+38,U+3A-3E,U+41-43,U+45,U+4A,U+4C-4E,U+53,U+54,U+5B,U+5D,U+61-79,U+7B-7D

Он также работает с —subset. Вы можете также использовать —json, чтобы увидеть все диапазоны, организованные семейства шрифтов. «*» — это универсальный список всех символов на странице.

$ glyphhanger https://www.filamentgroup.com/code/ --json
{"*": "U+20,U+21,U+26,U+28,U+29,U+2B-38,U+3A,U+3F-4A,U+4C-59,U+61-7A,U+A9,U+B0,U+2019,U+201C,U+201D","Source Sans Pro": "U+20,U+21,U+26,U+28,U+29,U+2B-38,U+3A,U+3F-4A,U+4C-59,U+61-7A,U+A9,U+B0,U+2019,U+201C,U+201D","Consolas": "U+20,U+28,U+29,U+3A,U+40,U+61,U+63-66,U+69,U+6B-70,U+72-75,U+78-7A"}

Добавляем шрифты в CSS

Glyphhanger самостоятельно создаст @font-face блоки в CSS . Используйте функцию —css для вывода блока @font-face в консоль. Естественно, он добавит не только диапазон unicode, но он также проставит правильные src с правильными именами файлов, возвращаемыми из —subset. Если вы используете —family, он добавит и это семейство шрифтов.

$ glyphhanger --US_ASCII --family='Source Sans Pro' --subset=Roboto-Regular.ttf --formats=woff2,woff --css
U+20-7E
Subsetting Roboto-Regular.ttf to Roboto-Regular-subset.woff (was 298.45 KB, now 14.37 KB)
Subsetting Roboto-Regular.ttf to Roboto-Regular-subset.woff2 (was 298.45 KB, now 10.78 KB)

@font-face {
  font-family: Source Sans Pro;
  src: url(Roboto-Regular-subset.woff2) format("woff2"), url(Roboto-Regular-subset.zopfli.woff) format("woff");
  unicode-range: U+20-7E;
}

В завершении

Glyphhanger — это очень полезный инструмент при работе с веб-шрифтами — он поможет вам очень быстро оптимизировать файлы. Но не спешите им сразу пользоваться — соблюдайте осторожность и предусмотрительность, прежде чем начать выполнять оптимизацию:

1. Убедитесь, что все ваши действия соответствуют лицензионным разрешениям на файл шрифта.
2. Подумайте над потенциальной аудиторией вашего сайта — возможно, у вас появится контент на других языках. Возможно, вам необходим более широкий диапазон Unicod’а, чтобы не иметь проблем в будущем.

Скачайте glyphhanger и попробуйте! Команда разработчиков будет рада любым отзывам на своем трекере проекта на GitHub. Каких возможностей вы еще желали бы сделать для работы с веб-шрифтами?