Веб-Острова Анатолия Куликова

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В завершении

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

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

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

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн

Статьи по теме

Всё о шрифтах: История

Всё о шрифтах: История

Исторический экскурс средних размеров по истории шрифтов — когда они появились, как развивались и что из этого всего получилось
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Собственные социальные кнопки

Собственные социальные кнопки

Простое создание кнопок социальных сетей с широкой кастомизацией
Создание каркаса сайта с помощью CSS and HTML5 [Перевод]

Создание каркаса сайта с помощью CSS and HTML5 [Перевод]

Перевод статьи Эрика Мейера о создании каркасной модели на живом сайте