Загрузка векторных значков через @font-face: за и против

    С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

    Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.



    <style>  
    .staricon {  
      font-family: 'IconPack';  
    }  
    .staricon:before {  
      content: 'a';  
    }  
    .show {  
      display:block;  
    }  
    .hide {  
      display:none;  
    }  
    </style>  
      
    <div class="staricon">  
      <span class="show">star</span>  
    </div>

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

    Преимущества

    Потенциально гораздо меньше HTTP-запросов
    Скачивание сотни маленьких картинок может занимать гораздо больше времени, чем одного большого файла. В некоторых случаях, это может привести к более быстрой загрузке страницы (как верно заметил хабраюзер Finom в комментариях, для этого используются спрайты).

    Один значок, бесконечные размеры
    Векторные значки означают масштабирование. Забудьте icon_8x8.png, icon_16x16.png, icon_24x24.png и т.д.

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

    Замена значков одной строкой CSS
    Все разговоры о TypeKit и о том, как легко встраивать шрифты, в будущем могут точно так же перейти на значки.

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

    Недостатки

    Шрифты могут быть большими
    Сложный шрифт легко перевалить за 90 КБ. Трудно оправдать такой размер, если вам нужен один какой-то особенный значок.

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

    Риск испортить дизайн
    Эксперименты со значками из шрифтов показывают, как легко запороть дизайн, если неправильно использовать эту технику.

    Разноцветные значки не работают
    Если вы хотите внедрить разноцветные значки (например, флаги стран), то вас ждёт разочарование: CSS3 позволяет использовать только простые градиенты, но больше ничего.

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

    via srd
    Поддержать автора
    Поделиться публикацией

    Похожие публикации

    Комментарии 33

      +7
      Еще один минус: сглаживание, которое часто отсутствует.

      > Преимущества
      > Потенциально гораздо меньше HTTP-запросов
      Для этого используют спрайты.
        +7
        Для визуального эффекта сглаживания отлично применяется тень 1px цвета, близкого к подложке. Заметно улучшает внешний вид, так сказать псевдо-сглаживание.
        +2
        На странице с демо забавно сделан фон. Только выделять текст неудобно :).
          0
          Джедайские технологии.
          К сожалению, кроме интереса — никакого профита. При эпической длине страницы фон заканчивается, а вариаций картинки — кот наплакал.

          Однако автор метода знает толк.
          +2
          еще одно большое преимущество — показ иконок даже с отключенными картинками, что тоже наглядно видно в демо — страница в браузере с отключенной графикой ничем не отличается
            +1
            ну на счет «большого» погорячились
              +1
              графику отключают разве что для экономии трафика, а это решение через @font-face во многих случаях тяжеловеснее, да и выглядит ugly :)
                0
                Зато в тех же целях можно отключить и подключаемые шрифты, а в итоге very ugly получится :).
                  +1
                  предлагаю заодно отключать css
                    0
                    Давайте уже сразу и HTML отключим :-)
            0
            Удобно!
              +1
              SVG, не?
                0
                DISQUS в своем виджете комментариев давно использует шрифт с иконками.
                  +2
                  > Разноцветные иконки не работают
                  Ничто не мешает сделать отдельный символ для каждого цвета и наложить несколько символов друг на друга.
                    0
                    Зачем??
                    0
                    а как бы повырезать лишние символы? а то грузить до 30кб ради пары иконок — не хочется. ещё на демо-странице виден скачёк когда подгружаются шрифты и появляются иконки — неприятненько. нет ли такого-же, но свободного проекта?
                      0
                        +1
                        Вы, конечно, имеете в виду генератор на этом сайте.

                        О генераторе ещё непременно надобно сразу объяснять неподготовленному читателю (будущему пользователю), что потребуется переключение в экспертный режим (переключатель «BASIC» — «OPTIMAL» — «EXPERT…» в положении «EXPERT…») для того, чтобы явилась возможность вычленения отдельных символов шрифта (переключатель «Subsetting» в положении «Custom Subsetting...» открывает доступ к полям «Single Characters» и «Unicode Ranges» для указания желаемых символов или целых диапазонов Юникода соответственно).
                          +1
                          Думаю, ребята разберутся :-) Но спасибо за помощь. Да, я именно это имел в виду.
                          0
                          что-то не нашёл там иконок
                            0
                            Вам, видимо, предложили ответ на первый Ваш вопрос, о том как «символы». Товарищ Mithgol выше описал как это делать.

                            А значки там всё-таки присутствуют в небольшом количестве.
                              0
                              *о том как «как бы повырезать лишние символы».
                        +5
                        Рекомендую для пиктограмм компьютерного интерфейса использовать термин «значок» вместо термина «иконка». И на то есть три причины.

                        Во-первых, термин «значок» произносится заметно быстрее (два слога вместо трёх), что упрощает (до некоторой степени) и его прочтение (особенно у тех читателей, которые не совершенно избавились от навыка внутренней речи при чтении).

                        Во-вторых, именно термин «значок» давно принят в наиболее популярной (и оттого привычной массовому пользователю) операционной системе Windows. Этим обеспечивается лучшая его узнаваемость. Укажу, что имеется статья «Как "Майкрософт" решает вопросы выбора терминологии» (из журнала «Мир Internet»), где в мае 1999 года Екатерина Лажинцева (тогда менеджер по операционным системам в отделе подготовки русских продуктов корпорации «Майкрософт») изложила историю выбора термина «значок».

                        В-третьих, подавляющее большинство этих элементов интерфейса не содержат изображения ликов Св. Троицы, или Богоматери, или святых. Для Хабрахабра (число христиан на котором по опросу не достигает и ¼) эта причина находится, что понятно, не первом месте — однако и она заслуживает упоминания.
                          +1
                          Боюсь не выйдет, все таки термин иконка как минимум так же популярен как и значок. В общем пусть будут синонимами, ну и при двусмысленности или тавталогии можно будет использовать один из терминов.
                            0
                            Ни разу не слышал чтобы слово «иконка» применялось к ликам святых. Только «икона», без всяких уменьшительно-ласкательных. Зато использование слова «иконка» в отношении к пиктограммам повсеместно.
                              0
                              Вы правы, исправил текст. Прошу прощения, что не сделал этого сутки назад, просто не сразу увидел ваш комментарий — перестали приходить уведомления о комментариях на почту, никак не починят.
                                0
                                А как Вы относитесь к службам в Windows?
                                +3
                                еще один не плохой набор
                                www.justbenice.ru/studio/websymbols/
                                  0
                                  Я конечно понимаю тупая идея, но многоцветные значки можно собирать из нескольких букв разного цвета которые будут идти один над другим.
                                    +1
                                    Это более кроссбраузерно, да и не нужно грузить весь шрифт ради 10-20 иконок + легко создавать свои
                                    raphaeljs.com/icons/
                                      –2
                                      А почему бы не юзать например svg и не совать это в base64 для уменьшения числа запросов?
                                        0
                                        Интересные невидимые ответы. Всё сразу понятно стало.
                                        0
                                        Загрузка шрифтов блокирует загрузку других инстанций, как js и css.
                                        Пока не загрузился шрифт, вместо иконок будут буквы, и поисковые роботы будут читать лишние символы.

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

                                        Самое читаемое