Что такое иконочный шрифт?

Кажется, будто ещё вчера в сети господствовал Пиксель. Нужно было всего лишь прописать точное число в CSS, и объект указанного размера появлялся на экране, как вы и хотели. Всё было просто и ясно. Но потом армия мобильных гаджетов свергла короля Пикселя с престола, и настали новые времена.

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

Мы все принимаем участие в создании нового мира. И иконки стали важной его частью. Чем меньше места доступно на экране, тем меньшего размера значки нужны для отображения элементов интерфейса. Но в то же время они должны быть масштабируемыми, поэтому растровые изображения использовать нельзя. Похоже, что Иконочный Шрифт — герой сегодняшнего дня. Но, как и всё в этом мире, иконочный шрифт тоже имеет свои недостатки. Давайте начнём с его плюсов и минусов.

Плюсы

  • Возможность бесконечного масштабирования и одинаково эффективная работа, как на стандартных, так и на Retina-дисплеях.
  • Можно прописывать CSS-стили включая тень, цвет, градиент, псевдо-классы :hover и :focus и т.д. Также очень удобно менять оформление всего набора иконок в приложении: достаточно лишь изменить правило в CSS и каждая иконка приобретет новый стиль.
  • Возможность анимирования.
  • Кроссбраузерная совместимость.
  • Меньше картинок — меньше запросов к серверу.

Минусы

  • Нет возможности создания разноцветных иконок: только один цвет или градиент.
  • Нет идеальной пиксельной чёткости.
  • Создать такой шрифт — долгая и сложная работа.

Итак, иконочный шрифт — это хорошее решение для web приложений с большим количеством иконок, оформленных в одном стиле.

Применение иконочного шрифта

  1. Подберите шрифт. Прежде всего, выберите шрифт, который хотите использовать. Но может оказаться, что в нем нет некоторых необходимых вам иконок. Или, возможно, вам не нужен весь набор значков, и вы хотите уменьшить размер файла шрифта. Или вы желаете объединить ваш собственный шрифт с некоторыми другими. К счастью, нашлись люди, которые решили за вас эти проблемы и создали сервисы Fontello и IcoMoon. Вам нужно всего лишь загрузить свой шрифт и/или выбрать необходимые иконки из готовых наборов.
  2. Распределите значки. После того, как вы решите какие иконки войдут в ваш шрифт, вам нужно соотнести их с буквами либо с символами Юникода. Второе предпочтительнее, так как в этом случае ваши иконки не будут распознаваться программами чтения текста с экрана (так называемыми “экранными дикторами”). Как IcoMoon, так и Fontello распределяют значки в области пользовательских символов, так что при желании вы легко сможете вносить изменения.
  3. Скачайте иконочный шрифт. Загруженный .zip-архив будет содержать шрифт во всех веб-форматах (.woff, .ttf, .svg, .eot) и пример html/css-файлов.
  4. Добавьте шрифт в проект. Разумеется, используя CSS:

    @font-face {
      font-family: 'EntypoRegular';
      src: url('Entypo-webfont.eot');
      src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'),
      url('Entypo-webfont.woff') format('woff'),
      url('Entypo-webfont.ttf') format('truetype'),
      url('Entypo-webfont.svg#EntypoRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
  5. Создайте разметку. В основном применяются два способа использования иконок в web: в одиночку и совместно со словом или фразой.
    1. Одиночный значок. Такие иконки, разумеется, функциональны, но не имеют наглядного описания. Поэтому разметка должна содержать текстовое пояснение, что очень важно для поисковой оптимизации и для экранных дикторов. Data-icon — это атрибут данных в HTML5, который позволяет хранить пользовательские значения, доступные для CSS и JS. Мы используем его для хранения конкретного значения символа, который мы хотим использовать. Абсолютное позиционирование текстового блока (с большими отрицательными значениями координат) позволяет сделать этот текст невидимым на экране, хотя он по-прежнему содержится в исходном коде веб-страницы.

      HTML

      <a href=”#”>
      <span aria-hidden=”true” data-icon=”&#128077;”></span>
      Like </a>
      

      CSS

      [data-icon]:before {
        font-family: 'EntypoRegular';
        content: attr(data-icon);
        speak: none;
      }
      

      Speak — это свойство, которое определяет, будет ли текст озвучиваться. Это относительно новая функция, поэтому нельзя быть уверенным в её кроссбраузерности, но мы всё же используем её, рассчитывая на поддержку в будущем.

    2. Значки с текстом. Такие иконки не должны быть прочитаны экранными дикторами, поскольку на экран уже выведено текстовое описание. Поэтому мы используем атрибут aria-hidden=”true” для html-контейнера элемента иконки. Псевдо-элемент :before используется для того, чтобы сгенерировать иконку в окне браузера, и при этом сохранить html-код простым.

      HTML

      <a href=”#”>
      <span aria-hidden=”true” data-icon=”&#9881″ ></span>
      <span > My Settings </span>
      </a >
      

      CSS

      [data-icon]:before {
        position: absolute;
        left: -10000px;
        top: -10000px;
      }