вебмастер, фидошник
0,1
рейтинг
20 марта 2012 в 12:05

Дизайн → Font Awesome: бесплатный свободный (CC BY 3.0) шрифт со значками для употребления в стиле Twitter Bootstrap

Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Напоследок скажу ещё, что при всех его достоинствах у шрифта по сравнению с растром есть и некоторые недостатки (например, невозможность употребления полупрозрачных и полутоновых элементов рисунка, которые используются в некоторых значках Glyphicons), однако недостатки эти в Font Awesome были обойдены сравнительно сносно.

Многое при отображении шрифта будет зависеть даже не от браузера, а от операционной системы; впрочем, это касается любого шрифта, и об этом было немало прежде сказано специалистами (например, в опубликованной 15 октября 2010 года статье «Type rendering: operating systems» во блоге Typekit, снабжённой примерами да скриншотами).

При укрупнении размеров шрифта многие различия рендерингов более или менее скрадываются, и шрифт выглядит эвона как:

[Font Awesome]
Mithgol the Webmaster @Mithgol
карма
60,5
рейтинг 0,1
вебмастер, фидошник
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (42)

  • +3
    На мой взгляд лучше заранее перегнать в png, который выглядит гораздо лучше. К примеру у меня в W7/Chrome это выглядит так:

    PS Пост про шрифт без картинки это как блудницы в сауне в парандже.
    • +2
      А если понадобится быстро изменить размеры иконок или их цвет? Тогда вариант со шрифтом в самый раз.
      • +1
        Что значит «понадобится быстро»? ) Отрендеренный спрайт с иконками 16, 24, 32 в двух вариациях — черный и белый покроет 99% всех проектов :)
        • +2
          Ну мы же не будете отрицать, что вариант со спрайтом — более трудоемкий и менее гибкий? :) А если, к примеру, на каком-нибудь финальном этапе разработки заказчик попросит уменьшить иконки на всех кнопках по сайту, а размеры кнопок увеличит — вы просто задолбетесь рендерить заново, задавать новые координаты спрайта и прочее. Или не размер, а цвет самой иконки — сделать не черной, а #666 — опять грузить фотошоп и там развлекаться?
          А с предложенным вариантом можно просто зайти в css и изменить несколько строк кода.
          • +1
            пардон, мы=вы в первом предложении
          • 0
            Ну так рендерить то не обязательно руками :)
            На этапе разработки — отличное решение. Перед релизом же, когда уже заказчик определился фиолетовые ему иконки или салатовые — уже и отрендерить неплохо )
            • 0
              Релиз — релизом, но как быть с дальнейшей поддержкой проекта? Особенно если он перейдет в руки другому разработчику без исходников в psd :)
              • +1
                Шрифт то доступен остается. Он же не в PSD.
                • +1
                  Все-таки, я останусь при том мнении, что перегон в png в данном случае — лишняя итерация и опциональное усложнение. Не для того Bootstrap создавался :)
                  • +1
                    Т.е. вы оставите кривые иконки в проекте только из-за идеологии одного из используемых инструментов?
                    • +2
                      Думаю, я буду исходить из той задачи, которая мне поставлена. Иконки-то кривые не из-за того что они криво нарисованы, а из-за особенностей рендеринга шрифтов. К примеру, на мобильном девайсе они смотрятся отлично, со сглаживанием. Поэтому на сайте под смартфоны я бы их применил. Плюс, будет элемент оптимизации — я не уверен, но есть подозрения, что шрифтовой файл будет весить меньше пачки png со всеми нужными мне вариантами.
                      • 0
                        В FF и IE9 они тоже смотреться будут хорошо.
                        • 0
                          Это зависит от операционной системы. Значок «Refresh» в неувеличенном виде явно рассчитан на DirectWrite от Windows 7, а не на ClearType под GDI+ от Windows XP.
                          • 0
                            В случае IE не зависит, так как 9-я на Windows XP не встанет.
                            Да и что греха таить, в хроме и под семеркой лесенка.
                            • 0
                              Это недофича с их стороны: в IE9 DirectWrite, в Файерфоксе также DirectWrite, а в Хроме, вишь ли, лесенка.
                        • 0
                          Даже если будут, то обычно набор браузеров при заказе сайта идет одним пакетом, из которого хром не выбросить, а делать отдельную развилку стилей — лишняя трата времени
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        > Фонт не захитован
                        Что, простите?
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • +1
                            Спасибо, узнал для себя нового + сделал им донейт.
                            • НЛО прилетело и опубликовало эту надпись здесь
          • +2
            > А если, к примеру, на каком-нибудь финальном этапе разработки заказчик попросит уменьшить иконки на всех кнопках по сайту, а размеры кнопок увеличит
            А если попросит сделать стрелочку покороче, кружок по приплюснотее, а корзинку без одного колесика и перечеркнутую?

            Все «А если» Либо уже оплачены, либо должны быть оплачены. А шрифт использовать или спрайты — у каждого своя религия =)
          • 0
            Чтобы сделать приблизительно цвет #666 чёрным иконкам, достаточно задать css свойство opacity: 0.9 или 0.8
            Это также позволит сделать их под цвет фона.
        • +2
          И еще момент — в этой статье шрифт указан в качестве приложения к Twitter Bootstrap, а этот фреймворк как раз подразумевает такой подход, используя налево и направо Css3 и максимальный отказ от лишних изображений, что делает его максимально гибким
    • +2
      Может, у вас отключено сглаживание шрифтов?
      Fx 12/W7
      • 0
        Нет, в винде включено. Я так понимаю это особенности вебкита.
        Я уже пытался внедрить этот шрифт у себя в суфти — там клиент с вебкит контейнером. Наступил на грабли с антиалиасингом и забил.
        • 0
          Ну, так тогда это проблема вебкита, а не шрифта же. Заведите баг им, в конце концов.
          • 0
            А я где-то говорил что это проблема шрифта? )
            i.imgur.com/BXsUx.png — фф, хром, ие.
            • +1
              Вы довольно безапелляционно сказали, что png выглядит лучше. Так вот он, как минимум, редко выглядит не лучше, а на отзумленных страницах(у меня всегда зум больше 100%) всегда выглядит хуже
              • +1
                редко выглядит не лучше => редко выглядит лучше
              • 0
                Я сказал дословно «На мой взгляд лучше заранее перегнать в png, который выглядит гораздо лучше».
                Ключевой момент «на мой взгляд».
    • +1
      Я питал надежду, может быть наивную, что последний абзац моей блогозаписи доносит мысль о том, что скриншот шрифта сильно зависит от операционной системы и её настроек. Я мог бы, например, сделать скриншот в Windows XP со включённым ClearType, но это никак не помогло бы представить вид шрифта в Mac OS, или даже в Windows 7 со включённым DirectWrite.
      • 0
        Ну я бы сделал скриншот там где он нормально выглядит с Вашей же поправкой. Чтобы можно было получить представление о нем не переходя на сайт.
        • 0
          Хорошо, добавляю скриншот, но с нарочно увеличенным размером шрифта — чтобы дать представление скорее именно о шрифте, а не о каком-либо конкретном рендеринге его.
  • +4
    Я использую HTML KickStart, в котором для этих целей встроена поддержка схожего шрифта IcoMoon. Мне он кажется более симпатичным, однако, спасибо и за Font Awesome! Жалко только, что как и в бесплатном наборе IcoMoon, здесь тоже нет иконки для обозначения денег/оплаты, а также иконки с грузовиком (для обозначения наземной доставки).
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Загружаемые шрифты — это не всегда хорошо, потому что у пользователя может быть выключена опция «разрешать страницам использовать свои шрифты», тогда вместо значков становится видно чёрт знает что.

    Кроме того, бывают проблемы с загрузкой шрифтов через прокси, например.
  • +1
    Наконец-то нормальные векторные иконки для Bootstrap'a! Раньше использовал WebSymbols, но эти более подходящие.
    • +1
      И лицензия очень вкусная:

      > A mention of Font Awesome — fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web).

      Т.е. лепишь

      перед тегом, подключающим стиль, и ты чист.
  • +1
    Я думаю, разумно было бы прикрепить эту запись к хабу «Иконосказ».
    • 0
      Хорошо.

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