Иконочные шрифты для мобильных устройств

    Уже достаточно долгое время мы ведем поддержку двух мобильных версий Поиска Mail.Ru. Этим постом хотелось бы раскрыть немного технической информации о графических интерфейсах.

    Первая из версий ориентирована на простые телефоны, которые медленно, но верно покидают современный рынок мобильных устройств, но еще не полностью забыты. К этой категории мы относим телефоны без полноценной операционной системы, браузеры в которых устарели, не понимают полноценного JavaScript-кода и не могут в силу своих ограничений поддержать быстро развивающиеся интернет-технологии. Для этой группы пришлось применять проверенный старый способ — .png- и .gif-графику.

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

    Часть 1: Подключение иконочных шрифтов

    Современные смартфоны обладают рядом особенностей, о которых нельзя забывать и к которым приходится подстраиваться. Одна из них — появление экранов с увеличенной плотностью пикселей (в частности, Retina-экранов), возможность увеличения страницы и, как следствие этого, размытие обычных картинок. Из-за этого возникла потребность в использовании масштабируемой графики, которая бы выглядела четко как в масштабе 1:1, так и после многократного увеличения. Выходом из этой ситуации стало использование иконочных шрифтов. На картинке ниже представлено два варианта: на верхнем показана картинка .png, увеличенная в 2 раза, а снизу — результат применения шрифта с иконками с тем же увеличением.



    Суть процесса заключается в том, что в шрифтовом файле буквы заменяются на графические иконки — по сути, создается уникальный шрифт. В нашем случае, к примеру, значок “@” заменен на лупу, английская буква “I” (от Internet) — на иконку земного шара, буква “P” (от pictures) — на иконку изображений, и так далее. При замене желательно придерживаться относительной схожести графики и символов-букв, чтобы в случае, если по каким-то причинам шрифт не подгрузился, пользователь все равно смог ориентироваться на сайте.

    Подгрузка нестандартного шрифта происходит так же, как и для PC, с помощью CSS-конструкции @font-face. Единственным отличием и большим плюсом является то, что при работе со смартфонами не нужно заботиться о поддержке различных форматов шрифтов (.eot, .woff, .ttf, .svg), как это необходимо делать для PC из-за разнообразия браузеров.

    Для телефонов на основе операционных систем iOS, Android, bada и BlackBerry достаточно подгружать один формат .ttf. Его прекрасно понимают не только встроенные браузеры, но и такие, как мобильный Firefox, Сhrome и Opera Mobile.

    В файле стилей подгрузка выглядит следующим образом:

    @font-face { 
    	font-family: 'goMailIco';
    	src: url("/font/goMailIco.ttf");
    	font-weight: normal; 
    	font-style: normal;
    }
    

    И все же, несмотря на то, что современные смартфоны обладают характеристиками, порой сравнимыми с персональными компьютерами, есть среди них и те, к которым требуется особый подход. В борьбе за улучшение качества отображения сайта пришлось выделить группу смартфонов, которой отдаются картинки. В эту группу вошли устройства на таких ОС, как Windows Phone 7 и Android версии ниже 2.2, а также браузер Opera Mini, открытый в телефоне с любой ОС. Это разделение мы произвели после экспериментов с тестовыми устройствами.

    На серверной стороне каждое устройство, с которого заходят на сайт go.mail.ru, определяется по user agent и другим параметрам. Дальше эти данные передаются в шаблонизатор — на проекте Поиск Mail.Ru используется Jinja. Запись по определению необходимости отдавать пользователю шрифт или картинку выглядит так:

    {% set switchFont = (detector.os in ('iphone os', 'blackberry', 'bada') or 
                        detector.os == 'android' and detector.osver >= 2.2) and 
                        (not detector.is_opera_mini) %} 
    

    Переменная switchFont является true, если на устройство установлена операционная система iOS, BlackBerry, bada или Android версии выше или равной 2.2, а переменная is_opera_mini равна false. Далее в зависимости от значения switchFont в шаблонах выводится одно из двух.

    Ниже показан кусок кода в шаблоне на примере логотипа:

    {% if switchFont %}
        <div class="logo__ttf">
            <a href="#">
                поиск<span class="logo__ttf_color">@</span>mail<span class="logo__ttf_color">.ru</span>
            </a>
        </div>
    {% else %}
        <a href="#">
            <div class="logo__img"></div>
        </a>
    {% endif %}
    

    Стили для него выглядят так:

    .logo__img {
        background: url(data:image/png) 0 0 no-repeat;
        background-size: 100% auto;
        width: 165px; 
        height: 25px; 
    }
    
    .logo__ttf { 
        font-family: 'goMailIco';
        color: #fff; 
        font-size: 24px;
    }
    
    .logo__ttf_color {
        color: #ffb81d;
    }
    


    Если шаблонизатор решил использовать вариант со шрифтом, к каждой букве, имеющей класс .logo__ttf, применяется нестандартный шрифт ‘goMailIco’, в котором стандартная буква m заменена на букву из фирменного шрифта mail.ru. Остается только подобрать правильный размер с помощью font-size, задать цвет, тени и при желании использовать все возможности CSS3.

    В случае, когда мы берем картинку, ситуация практически стандартная, не считая того, что мы загружаем изображение в два раза больше необходимого. Например, чтобы показать картинку 200х300 пикселей на экране с увеличенной плотностью пикселей, необходимо загрузить картинку размером 400х600 пикселей и затем уменьшить, используя CSS-атрибуты, html-параметры, или, как в нашем случае, изображение в качестве фона с необходимыми размерами контейнера, фон в котором ужимается в два раза с помощью стиля “background-size: 100% auto;”.

    При таком варианте возможна загрузка избыточно больших изображений для смартфонов со стандартным разрешением экрана (device-pixel-ratio: 1), которые не приспособлены для увеличения. Это компенсируется кодированием фонового изображения в формат base-64, что позволяет выиграть разницу в размере файла и избавиться от необходимости хранить и поддерживать изображения в двух форматах — 1 к 1 и 2 к 1. Плюс еще в том, что этот способ существенно минимизирует количество http-запросов к серверу, что увеличивает общую скорость загрузки.

    Часть 2: Разработка шрифта

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



    Предпочтительно работать с большими размерами обьектов, от 500 до 1000 пикселей. При этом стоит избегать излишней детализации, ведь иконка может быть растеризована на экране размером 16-32 пикселя. Используйте одноцветные формы, без обводок и каких-либо эффектов; цвет и другие эффекты, например, тень, могут быть применены к иконке уже при верстке страницы. При необходимости использовать в иконке несколько цветов придется разбить ее на элементы, каждый из которых сделайте отдельным символом шрифта, которые затем будут наложены друг на друга и соответственно окрашены.



    Существует несколько программ-редакторов, например Font Creator (для Windows), Glyphs (для Mac) или Inkscape (для Windows, Mac, Linux) — в нем можно сразу редактировать векторную графику и создать шрифт в svg-формате.

    Для итогового результата не так важно, создаете ли вы новый шрифт или заменяете символы готового; но, добавляя символ в пустой шрифт, придется вручную искать и назначать соответствующий символу индекс для разных операционных систем, затем настраивать различные метрики. Проще взять за основу готовый шрифт с лицензией, допускающей его изменение — например, с сайта font.cc. Импортируем подготовленную векторную графику, заменяя выбранные буквы, и следим за соответствием размеров, отступов, выравниваем по базовой линии.



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



    Если ваш редактор сохраняет шрифт только в формат, отличный от .ttf, можно воспользоваться online-сервисами для конвертации, например, Fontsquirrel. Подобные сервисы также позволяют уменьшить размер файла, удалив неиспользуемые символы, но лучше это сделать на этапе разработки в редакторе.

    Вот и все. Если вы нашли какое-то альтернативное решение для экранов со сверхвысоким разрешением — делитесь.

    Ознакомиться с мобильной версией проекта Поиск можно зайдя по ссылке go.mail.ru с мобильного устройства.

    Дария Скакун, разработчик мобильных версий проекта Поиск
    Алексей Лиходзиевский, руководитель мобильного направления проекта Поиск
    Mail.ru Group
    Building the Internet

    Comments 7

      +1
      А почему сразу не юзать SVG, вроде все смартфонные браузеры его понимают? Тогда верстальщику не придется разбираться с программами для создания шрифта.
        +2
        Если у вас многоцветные картинки с градиентами, и посещают ваш сайт с актуальных устройств — возможно лучше использовать SVG. Для одноцветных иконок, преобразовние их в шрифт показалось проще. Плюс графика в шрифте хорошо сжимается, аналогичный SVG по нашим оценкам весил больше, что ощутимо в случае мобильного интернета. В каждом случае свои оптимальные решения: в одном проекте можно использовать шрифт, SVG и картинки высокого разрешения одновременно.
        +1
        А вы случайно не сталкивались с таким эффектом, когда один и тот же символ отображается со смещением в пиксель в разных браузерах? Например, если взять fontello.com/ и сравнить в лисе и хроме, то можно заметить небольшую разницу в отступах от рамки.
        +1
        Для мобильных браузеров мы с такой проблемой не сталкивались, там другие алгоритмы сглаживания и опять же высокое разрешение экранов. В десктопных браузерах, из за особенностей рендеринга шрифтов, возможен визуальный сдвиг или увеличение толщины элементов иконок.
        Попробуйте сбросить браузерные стили, подберите подходящие свойства CSS line-height и font. Подробности решения данной проблемы тянут на отдельную статью, оставаясь в рамках комментария, несколько ссылок по теме.

          0
          У меня поведение в десктопном хроме и хроме для андроида одинаковое, но отличалось от стокового андроидовского браузера (где все было ок). Все сброшено, вроде со всем игрался, даже есть баг для fontello, но я так и не добился 100% выравнивания по середине контейнера. Наверное случай должен быть особенный, чтобы обратить на это внимание.
          0
          Кроме редакторов шрифтов, можно использовать для сборки веб-шрифтов fontcustom и grunt-webfont. Они конвертируют набор SVG-файлов в веб-шрифты нужных форматов и CSS-файл, готовый к использованию на сайте.

          Only users with full accounts can post comments. Log in, please.