Оптимизация шрифтов
Как получить наименьший размер шрифтовых файлов
Столкнулся (в очередной раз) с некорректной работой конвертера fontsquirrel.com (для некоторых шрифтов он очень заметно деформирует символы шрифта) и решил разобраться каким образом можно самостоятельно получить оптимизированные файлы шрифта для использования при верстке сайтов.
Требования к инструментарию:
- на выходе должен получаться минимальный размер файлов (скармливать инструменту набор символов, которые нужно оставить в шрифте),
- отсутствие деформаций символов после конверсии,
- работа с форматами TTF, WOFF/WOFF2,
- кроссплатформенность,
- бесплатность,
- локальность (не веб-сервис).
Рассматривать буду все в разрезе использования консоли и nodejs/npm. Если вы еще не начали использовать консольные инструменты, самое время начать.
Оптимизация шрифта
Задача: оставить в шрифте только те символы, которые необходимы на проекте. В моем случае, это цифры, латиница, кириллица (не целиком) и некоторые другие (кавычки, тире и т.п.) символы.
Для этих целей обнаружил три инструмента:
- fonttools — набор консольных инструментов, в т.ч. инструмент, оставляющий в файле шрифта только символы с указанными utf-кодами.
- fontforge — бесплатный редактор шрифта (полноценный редактор с GUI).
- fontmin — набор китайских инструментов (есть консольные варианты, вебсервис и приложение с GUI).
fonttools
Лучший из найденных инструментов. Требует установленного Python. Ставим инструмент и потом в консоли:
pyftsubset fonts/Roboto-Black.ttf --output-file=fonts/Roboto-Black--pyftsubset.ttf --unicodes-file=codes.txt
fonts/Roboto-Black.ttf— исходный файл,fonts/Roboto-Black--pyftsubset.ttf— результат,codes.txt— файл с кодами символов, которые нужно оставить в шрифте (пример, получить свой набор можно любым конвертером символов).
Результат для TTF:
- Open Sans 212 Кб → 25 Кб.
- Pt Serif 319 Кб → 62 Кб.
- Roboto 158 Кб → 33 Кб.
- Roboto Condensed 156 Кб → 33 Кб.
- Roboto Slab 166 Кб → 35 Кб.
После конвертации в WOFF и WOFF2 размеры файлов становятся еще приятнее.
Из обнаруженных минусов:
- Пропущенные через инструмент шрифты при открытии стандартным инструментом просмотра шрифтов (по кр. мере, на Windows) выдают ошибку (браузер переваривает их корректно).
- Я получил файл нулевой длинны для одного из конвертируемых шрифтов. Странный глюк с неизвестной причиной (пришлось использовать fontforge).
fontforge
Бесплатное кроссплатформенное ПО для редактирования шрифтов, в т.ч. можно выделить и очистить площадки символов, которые не нужны на проекте, радикально уменьшив размер файла.
Увы, мною не были обнаружены адекватные инструменты автоматизации, позволяющие поточно обработать несколько файлов по одной маске. А выделять символы вручную — минут по 5-7 на файл — не хочется категорически. Если подскажите способ сохранить выделение символов или как-то консольно вызвать fontforge, чтобы от взял ttf-файл, вырезал символы и сохранил, буду благодарен.
fontmin
Устанавливаем глобально и потом в консоли можно:
text="`cat subset.txt`" && fontmin -t "$text" fonts/lato.ttf > fonts/lato--fontmin.ttf
subset.txt— файл с символами, которые хочется оставить в шрифте (пример),fonts/lato.ttf— исходный файл,fonts/lato--fontmin.ttf— результат.
Одна беда: fontmin вырежет все пробелы. Либо оставит, но подпортит ширины символов. Поскольку пробельные символы могут сильно отличаться в разных шрифтах, диагноз: малоюзабельно.
Конвертирование шрифта
ttf2woff
- Конвертирует TTF в WOFF.
- Консольный инструмент. Нужно владеть азами работы с консолью и иметь установленный node.js.
- Настроек не имеет.
Ставим инструмент глобально и потом в консоли:
ttf2woff fonts/lato.ttf fonts/lato--ttf2woff.woff
Указывается путь и имя исходного и результирующего файла.
ttf2woff2
- Конвертирует TTF в WOFF2.
- Консольный инструмент. Нужно владеть азами работы с консолью и иметь установленный node.js.
- У меня (Windows 10) работает медленно: до пары минут на конверсию одного файла.
Ставим инструмент глобально и потом в консоли:
cat fonts/lato.ttf | ttf2woff2 >> fonts/lato--ttf2woff2.woff2
Указывается путь и имя исходного и результирующего файла.
Прочие инструменты (веб-сервисы)
font2web.com — конвертер
- Работает не со всеми шрифтами (чёрный список обнаружить не удалось, попытка сконвертировать Open Sans привела к скачиванию архива без шрифтов).
- Настроек не имеет.
- Не отдаёт шрифты в формате WOFF2.
- Работает с одним файлом за раз.
freefontconverter.com — конвертер
- Отдаёт TTF, WOFF, WOFF2, EOT, SVG.
- Настроек не имеет.
- Работает с одним файлом за раз.
- Получает TTF, который становится немного меньшего размера в результирующем архиве.
web-font-generator.com — конвертер
- Отдаёт TTF, WOFF, EOT, SVG.
- Настроек не имеет.
- Работает с одним файлом за раз.
- Показывает превью результата.
- Умеет конвертировать в base64.
- Иногда выдает бОльший размер файла, чем у закачанного оригинала.
webfont.ru — конвертер и оптимизатор
- Отдаёт TTF, WOFF, WOFF2.
- Позволяет работать только с имеющимися на проекте шрифтами, свой загрузить нельзя.
- Одновременная работа только с одним шрифтом (при переходе от шрифта к шрифту в рамках гарнитуры сохраняются настройки конвертера).
- Есть настройка с указанием сохраняемых в шрифте диапазонов символов или конкретных символов, что в несколько раз уменьшает вес файла (212Кб → 27Кб для Open Sans с минимальным набором символов).
- Умеет конвертировать в base64.
- Меняет визуальную плотность, портит полуовалы, деформирует вертикальные размеры букв, меняет высоту строки.
fontsquirrel.com — конвертер и оптимизатор
- Отдаёт TTF, WOFF, WOFF2, EOT, SVG.
- Работает не со всеми шрифтами (чёрный список имеется, но не опубликован).
- Множество настроек, в том числе указание диапазонов символов или конкретных символов (212Кб → 34Кб для Open Sans с минимальным набором символов).
- С настройками по умолчанию убирает из шрифта все нелатинские символы (в т.ч. кириллические).
- Работает с несколькими файлами за раз.
- Умеет конвертировать в base64.
- Меняет визуальную плотность, портит полуовалы, деформирует вертикальные размеры букв, меняет высоту строки, для некоторых размеров «съедает» внутрибуквенные просветы.