Хорошие веб-девелоперы борятся за высокую скорость загрузки сайтов. И если минификация и оптимизация стилей, скриптов и html-кода знакома всем, то оптимизация шрифтов - дело менее известное. Я расскажу о том, какими способами это можно осуществить.
Делаем шрифт компактным
Данный подход подразумевает удаление из файла всех неиспользуемых глифов.
Есть несколько путей, некоторыми из которых вы, возможно, уже активно пользуетесь.
CSS-свойство unicode-range
Наиболее современный, уместный и простой способ сделать загрузку шрифтов экономичной. Браузер действительно выбирает из файла только нужную часть и тем экономит ресурсы. Это свойство, прописываемое в медиазапросе @font-face
поддерживается уже всеми браузерами практически без проблем. При этом для разных селекторов можно задавать свои наборы символов, что позволяет нам прикреплять к ресурсам тяжёлые шрифты, не внося в них никаких изменений. Интервалы для современной русской кириллицы (без редких символов) задаются следующим набором:
unicode-range: U+0400-04FF;
Между тем, порой шрифты требуют модификации.
Настройка на WebFont
WebFont - замечательный каталог всех свободных кириллических шрифтов, так что если вы решили обойтись бесплатным шрифтом, вам сюда. Когда вы выбираете нужный вам шрифт, нажмите на кнопку "Скачать", а затем выберите "Расширенные вохможности".
Мы попадаем в интерфейс настройки и вольны выбрать как целые диапазоны (это лишнее), так и конкретно по буквам.
Я использую кастомный набор символов, поскольку не все из них есть в предлагаемых диапазонах. Внимание следует обратить на знаки валют, кавычки-«ёлочки» и другие востребованные спецсимволы.
0123456789
!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~¢
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзийклмнопрстуфхцчшщъыьэюяё
–£¥©«®´»—‘’“”•…€₽™
Скачиваем, и наш оптимизированный шрифт готов.
Следует отметить, что шрифт, обработанный WebFont
оптимизируется, весит меньше и более аккуратно рендерится. Об этой фиче
можно прочитать в их
записи. Поэтому я считаю такой путь оптимизации вполне стоящим.
Но что делать, если мы получили платный шрифт и хотим (если позволяет лицензия и совесть) его облегчить? В дело вступает редактор шрифтов. Я использую FontForge, поскольку, в отличие от онлайн-сервисов, он позволяет производить более глубокие манипуляции, в частности - объединение.
Облегчение шрифтов в FontForge
Установка на Ubuntu тривиальна:
sudo apt install fontforge.
Программа поддерживает далеко не все современные веб-форматы, поэтому надо позаботиться, чтобы у нас в наличии был TTF, OTF или WOFF.
Чтобы скрыть места под пустующие глифы, выбираем Encoding -> Compact.
Теперь мы видим, что у нас есть, и сразу понимаем, что хотим удалить. Удаляются глифы выделением ЛКМ и выбором команды контекстного меню Clear.
Сохранённый в одном формате шрифт можно сконвертировать во всю палитру веб-шрифтов, используя отличный сервис
https://onlinefontconverter.com/.
Создание иконочного шрифта
Здесь комментарии излишни: пользуйтесь
IcoMoon или
Fontello, вместо того чтобы подключать сразу весь FontAwesome.
Правда для рунета FontAwesome не достаточен, так что наш вебмастер едва ли работает с такими решениями.
Объединение
Наконец, самая интересная часть. А что, если нам надо ровно три иконки? Не подключать же ради этого отдельный шрифт в три символа? А если наш посетитель сидит на спутниковом интернете с полусекундными пингами? Можно сделать inline-font, то есть сконвертировать в base64 и вставить прямо в CSS-файл. А можно шрифты и объединить.
Для этого в FontForge надо выбрать Element -> Merge Fonts. Иконочные шрифты, как правило, занимают неиспользумые глифы, поэтому конфликтов с заменами возникнуть не должно.
Проблемы
Основная проблема объединения может заключаться в разном горизонтальном позиционировании глифов. Однако средствами CSS эта проблема, как правило, решаема. Тем не менее, это некоторый аргумент к тому, чтобы не мучиться с объединением и оставить иконочный шрифт отдельным файлом, либо сделать его inline.
Юникод и глифы
Вообще, ставить глифы иконочных шрифтов на пустые или экзотические места не так уж продуктивно. Если шрифт по каким-то причинам не загрузится или отключён в браузере, как мы обеспечим обратную совместимость? Я решаю этот вопрос переносом иконок на места наиболее похожих символов в Юникоде. Данные о Юникод-символах я беру из
Unicode Table, разумеется. Чтобы не мучиться с переносом иконок в FontForge, уже в IcoMoon можно (и нужно!) задавать для иконки соответствующий глиф. Например, для знака ВКонтакте я использую эмодзи "Морда собаки" 🐶, для остальных можно придумать другие изобретательные варианты.
Знак рубля
А вот другая большая проблема любого разработчика - отсутствие свежих символов в старых шрифтах. Например, эмблемы рубля.
Просто вставлять этот знак из другого шрифта неправильно. Куда проще его нарисовать. Делается это так.
В FontForge мы, во-первых, копируем заглавную "Р". Находим клетку U+20bd, вставляем туда глиф. Два раза щёлкаем и открываем редактор.
В панели инструментов выбираем инструмент
и добавляем четыре точки. Потом добавляем ещё по одной, вытягиваем углы в стороны, и ещё две, чтобы довести силуэты до прямоугольников. Далее, меняем инструмент на обычный указатель, выделяем соответствующие пары точек и перемещаем их клавишами влево-вправо-вверх-вниз, добиваясь адекватного внешнего вида. Отображение глифа меняется в основном окне, так что можно контроливать, как будет выглядеть символ в уменьшенном виде.
Ничего сложного!
В результате мы можем не зависеть от разработчиков шрифтов, модифицировать и упрощать шрифты, как нам угодно и быть довольными нашей небольшой, но аккуратной оптимизацией. Копейка рубль бережёт.
Американский музей естественной истории (очень жаль, что наши музеи не занимаются такой работой...) опубликовал наглядное видео, показывающее рост численности населения.
