Frontender Magazine

Эпоха символьных шрифтов

Увеличение производительности сайтов – это непрерывный процесс. Сперва мы отказались от таблиц, прозрачных однопиксельных gif-файлов, тегов физического форматирования типа <font> в пользу CSS, уменьшая размер страниц и разделяя данные и их представление. После этого мы озаботились DNS-запросами, кэшированием и количеством файлов, начали использовать CSS-спрайты, собирая кучу маленьких картинок из HTML в одно фоновое изображение.

Отныне мы вступаем в третью эпоху оптимизации, эпоху символьных шрифтов.

Символьные шрифты позволяют объединять иконки в файл шрифта, вместо графического спрайта. Этот способ, как и спрайты, дает выигрыш за счет кэширования и меньшего размера файла и несет дополнительные преимущества, ценность которых мы начинаем понимать с появлением экранов высокого разрешения. В этой статье я расскажу о некоторых преимуществах и проблемах, с которыми вы столкнётесь при использовании символьных шрифтов.

Довольный пользователь

С ростом количества шрифтов, созданных для использования в качестве иконок, идеограмм и декоративных элементов, несколько высоконагруженных сайтов заменили все растровые изображения одним единственным шрифтом. Одним из наиболее известных примеров может служить GitHub, одновременно улучшивший скорость и опыт взаимодействия пользователей, отказавшись от множества крохотных файлов иконок в пользу созданного его разработчиками шрифта Octicons.

Использование символьных шрифтов позволяет заменить растровые изображения, подверженные пикселизации, векторными. Это важно, потому что растровые изображения предназначены для использования на определённом разрешении экрана, и при повышеной плотности пикселей, например на современных экранах высокого разрешения, их приходится масштабировать, чтобы визуально они оставались того же размера. В результате реастровые изображения выглядят пикселизированными. С векторными изображениями таких проблем не возникает. Их можно масштабировать под любое разрешение.

В прошлом использование векторной графики имело определённые ограничения. Можно было использовать PDF и SVG, но это было чревато проблемами совместимости. Шрифты – векторные, и все браузеры, включая IE6, умеют с ними работать. Благодаря поддержке браузерами веб-шрифтов и появлению экранов повышенной четкости у нас есть возможность еще больше оптимизировать производительность и улучшить пользовательский опыт взаимодействия с сайтами.

Доступность

Что касается доступности, то символьные шрифты ведут себя скорее как текст, чем как картинка.

Многие ранние символьные шрифты привязывали глиф к определенной букве в ASCII таблице. Печатая w, вы получали иконку глобуса, m — иконку почтового конверта. Это обеспечивало легкий для восприятия механизм превращения символа в иконку. Проблемы возникали, если шрифт по какой-то причине не загружался, что приводило к появлению странных и бессмысленных букв в самых неожиданных местах. Например, если предполагалось показать стрелочку рядом со словом «следующая», то разметка выглядела примерно так:

<div><span class="icon">L</span> Следующая</div>

Но если не загрузился CSS, JavaScript или шрифт, то вместо стрелочки вы увидите букву L. Вы можете сделать все для корректной деградации: вставлять код с помощью JavaScript или использовать псевдо-элементы :before и :after, но в результате поисковые машины все равно могут проиндексировать текст как «L Следующая».

Существует лучший путь.

Мы набрались опыта, узнали больше о проблемах, связанных с использованием символьных шрифтов, и решили конкретно эту с помощью области пользовательских символов Юникод. Символы в этой области не связаны по смыслу ни c одной из букв в алфавите. Если шрифт не доступен или не загрузился, то вместо бессмысленной буквы вы увидите пустое место.

Но подождите, мы можем сделать еше лучше!

В шрифтах также существуют лигатуры — иногда малозаметные изменения в форме глифов стоящих рядом букв для улучшения их эстетики и восприятия при чтении. Возьмём, к примеру, двойную букву f. Хороший шрифт превратит ff в один глиф, в котором буквы плавно соединяются. Существуют стандартные лигатуры, например: ff, fl и fi. Но что нам мешает создать собственные? В файле шрифта лигатура – это просто замена определенной последовательности символов одним. Это значит, что вы можете, например, написать «A List Apart», и текст превратится в иконку логотипа.

Браузеры, не поддерживающие подключение сторонних шрифтов, и поисковые боты проиндексируют сырой текст без лигатур, но все остальные, с поддержкой возможности рендеринга подключаемых шрифтов и лигатур, получат приятную векторную иконку. Это наилучшее решение, работающее на куда более высоком уровне абстракции, чем HTML и CSS.

Как только вы начинаете понимать, как работают лигатуры, перед вами открывается новый мир, полный возможностей. Все иконки, используемые в навигации, могут быть как и символами, так и лигатурами в шрифте. И вот ваша разметка выглядит примерно так:

<ul>
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Cart</li>
</ul>

Однако результат с включенными лигатурами будет таким:

Иллюстрация

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

Использованию лигатур для замены последовательностей символов есть множество практических применений. Например, на сайте BBC News раньше в углу стартовой страницы были часы. Можно было использовать для их создания Flash, но это был бы скверный совет, продиктованный недостатком альтернатив и их низкой кроссбраузерностью, еще для вращения изображений стрелок можно было использовать CSS и JavaScript для задания временных интервалов. Вместо этого в BBC решили использовать Canvas и перерисовку часов с помощью JavaScript.

Но все нефлэшевые решения используют растровые изображения, которые на экранах высокого разрешения выглядят отнюдь не лучшим образом. Существуют JavaScript библиотеки, например, Raphaël, которые умеют создавать SVG- или VML-объекты. Они будут векторными, но из-за того, что эти объекты загружаются и создаются c помощью JavaScript, они невидимы для поисковых ботов и браузеров, которые не поддерживают JavaScript.

Иллюстрация

Использование символьных шрифтов объединяет лучшие стороны этих подходов: доступность и векторную графику. Напечатав «12:00», вы вызовете лигатуру, которая преобразует набор символов в иконку со стрелками, указывающими ровно на 12. Строка «12:01» вызовет другую лигатуру, соответствующую положению стрелок. Придется создать множество лигатур, но в результате вы получите прекрасные векторные часы. Вообще-то, такие шрифты уже существуют; на странице http://timepiece.inostudio.de вы найдёте несколько примеров. Загляните в исходники, и вы увидите, насколько все просто.

Только подумайте о всех элементах сайта, которые могли бы быть иконками символьного шрифта. Откройте разум для новых возможностей. Все, начиная от маркера списка и стрелочек и заканчивая иконками RSS и социальных сетей, можно объединить в один крохотный файл шрифта, который можно кешировать и отображать в разных размерах и цветах без необходимости создания растрового изображения для каждого конкретного случая.

Создание собственного символьного шрифта

Разработчики съели собаку на работе в Photoshop, Fireworks и т.п. Когда мы начинали использовать спрайты, это не было проблемой. Инструмент не менялся. С использованием символьных шрифтов к стандартному набору инструментов добавляется новый: редактор шрифтов. Нам предстоит укротить нового зверя, но в этом нет ничего сложного.

Более того, чтобы помочь нам в создании шрифтов, было создано моножество инструментов. К примеру, Icomoon позволяет загружать SVG файлы и привязывать их к Юникод символам, после чего генерирует веб-шрифт, готовый для использования.

Но что же делать, если мы хотим сделать более тонкую настройку шрифта? Для создания шрифтов существует множество приложений. Некоторые из них платные, предназначенные для профессионалов, но чаще всего используется бесплатный FontForge. Он cложноват, но в сети множество статей, которые помогут вам разобраться.

Проблемы со шрифтами

Любой дизайнер может сказать вам, что иконка или логотип должны немного отличаться при разных размерах, обычно это заключается в переменной толщине линий или даже отсутствии каких-либо деталей при маленьких размерах. Между тем, символьные шрифты не дают вам этой возможности: вы не можете сделать несколько иконок под разные разрешения. Глиф созданный для использования в размере 20 пикселей останется таким же и при масштабировании до 120 пикселей, и до 6.

Если вы хотите, чтобы дизайн иконок отличался для разных размеров, то вам придется добавить дополнительную иконку в файл шрифта и по необходимости выбирать нужную. Это тоже проблема, так как вы понятия не имеете, как конечный пользователь просматривает ваш сайт. Например, увеличение кегля шрифта не приведет к автоматической смене иконки. Для большинства из нас, впрочем, это не проблема, так как в основном символьные шрифты используются для иконок социальных сетей, которые и так неплохо масштабируются.

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

Для устранения этого недочёта Applе предложила полноцветные шрифты, которые позволят вам создавать и подключать векторную графику на любой веб-странице. Первой попыткой в этой области является шрифт Apple Color Emoji, который есть в OSX Lion. Недостатками введения нового формата шрифтов является слабая поддержка браузерами и инструментами разработки, так что пройдет еще много времени, пока его можно будет использовать.

Добро пожаловать в следующую эпоху

Символьные шрифты — следующий шаг в дизайне сайтов и оптимизации их работы, и вам необходимо понимать принцип их работы, чтобы заниматься веб-разработкой. Со временем вы сможете создавать для своих сайтов собственные шрифты с логотипами, иконками и брендированием. Это не только улучшит впечатление от вашего сайта, но и скажется на его производительности. Наступило время начать использовать символьные шрифты и совершенствовать инструменты их разработки, связанные с ними стандарты и приемы их использования.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Brian Suda
Автор:
Brian Suda
Сaйт:
http://suda.co.uk/
Twitter:
@briansuda
GitHub:
briansuda
Владимир Старков
Переводчик:
Владимир Старков
Сaйт:
http://iamstarkov.com
Twitter:
@iamstarkov
GitHub:
iamstarkov

Комментарии (6 комментариев, если быть точным)

Автар пользователя
sapegin

Идея с лигатурами классная. Пожалуй, мне стоит добавить их поддержку в grunt-webfont.

Автар пользователя
SilentImp

Было бы очень здорово.

Автар пользователя
geminic

Мне очень нравится решение http://fontawesome.veliovgroup.com/ Шрифт бесплатный, постоянно расширяется. Кроме того, можно заказать нужные тебе иконки. Хотя мне всегда хватало того, что есть.

Автар пользователя
iamstarkov

Самым интересным в этой области для меня представляется проект Fontello. Из уже 14 бесплатных шрифтов можно выбрать только понравившиеся или нужные иконки, отредактировать названия классов иконок, самостоятельно привязать к символам и скачать готовый оптимальный для тебя шрифт.

Автар пользователя
smolnikov

Ух ты, Fontello очень классный! Добавил в закладки, спасибо!

Автар пользователя
ghost

Полностью поддерживаю @matmuchrapna. Решение от fontello наиболее удобный и доступный вариант на сегодняшний день. Особенно радует возможность обновления уже имеющегося на сайте набора иконок путем загрузки файла config.json.