LINUX.ORG.RU

Анонсирован Fontello — генератор иконочных шрифтов для веба

 , ,


2

3

На днях открылся публично проект Fontello, предназначенный для тех, кто делает современные вебсайты и выкладывает графику в виде шрифтов. Его цель — максимально упростить работу с подобными шрифтами (объединение глифов из разных источников, выкидывание лишнего, генерация сопутствующих файлов). Fontello позволяет выбрать те иконки, которые потребуются для вашей конкретной задачи, и собирает из них фонт минимального размера.

В проект включены 3 самых популярных свободных иконочных шрифта — Entypo, Awesome и Iconic. Также сделана подборка Brandico, специально для иконок мессенджеров и социальных сервисов — их часто не хватает в других коллекциях.

Помимо вебсайта, авторы подготовили набор утилит font-builder для упрощенной генерации шрифтов из SVG-изображений. Это чем-то похоже на генератор от Font Squirrel, но специально для иконок и с открытым исходным кодом. Автоматизировано все, включая хинтинг. Font Builder уже используется для генерации Entypo и показал хорошие результаты.

Также в планах проекта сделать иконочный шрифт, наполняемый по принципу «crowd source».

Исходные коды Fontello распространяются под лицензией MIT.

>>> Подробности

★★★★★

Проверено: maxcom ()

А так то «ребрендинг» fontomas'а, давно известный проект

maxcom ★★★★★ ()

Выглдяит также как некий fontomas, скриншот которого у меня датирован 23м февраля.

Kalashnikov ★★★ ()
Ответ на: комментарий от Kalashnikov

Я инвестировал 15 долларов в покупку домена. Это большой шаг для опенсорсного проекта, позволивший поменять номер версии с 0.0.1 сразу на 2.0.0

Vit ★★★★★ ()

Картинки встраивать в шрифт, я правильно понял ?

А зачем ? ведь можно встраивать в страницу картинки ...

s9gf4ult ★★ ()
Ответ на: комментарий от s9gf4ult

Потому что так удобнее. И ради векторов. Чтобы на разных девайсах страничка хорошо скейлилась.

Vit ★★★★★ ()

и собирает из них фонт минимального размера.

фонт

что это за слово такое? фронт, фонд... не понимаю.

anonymous ()
Ответ на: комментарий от Chaser_Andrey

SVG нормально поддерживают не все и пролетают с хинтингом. Я на хабре уже перетроллил тему вдоль и поперек. Почитайте.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Зато svg можно использовать не только на монохромных мониторах, но и на цветных (где плоская двуцветная графика смотрится крайне отстойно).

mine ()
Ответ на: комментарий от mine

С другой стороны у шрифта легко менять цвет, добавлять тень/выделение и т.п. свойствами css

maxcom ★★★★★ ()

Fontello will not work without javascript!

luke ★★★★ ()
Ответ на: комментарий от mine

Зато svg можно использовать не только на монохромных мониторах, но и на цветных

А он же по разному в разных браузерах себя ведет, не?

(где плоская двуцветная графика смотрится крайне отстойно).

В Mac OS монохромные иконки, и что в этом отстойного? Более строго выглядит, просто.

anonymous ()
Ответ на: комментарий от maxcom

Даже если у шрифта изменить цвет он всё равно останется монохромным. Тень для графики - спорно, но таки согласен - преимущество. Но всё равно шрифт с графикой и тем более с векторной (svg) не сравнить.

mine ()
Ответ на: комментарий от anonymous

В Mac OS монохромные иконки, и что в этом отстойного?

Монохромные иконки выглядят отстойно. И, кстати, я не знаток инструментов банального рабства, поэтому вас не затруднит ткнуть ссылку на скриншотик с монохромной макосятиной? А то всё, что гугл выдаёт по запросу Mac OS, - крайне цветасто.

mine ()

Потыкал, понравилось, но потом…

Entypo, Awesome и Iconic

Мало, очень-очень мало, я ожидал, что любые шрифты можно будет загружать и из них собирать :(

Psych218 ★★★★★ ()
Ответ на: комментарий от Psych218

А смысл? Шрифтов-то нет. Все самые качественные я уже добавил.

Vit ★★★★★ ()

Тот чувак из твиттера так в себя и не пришёл, всё дуется? :)

AP ★★★★★ ()
Ответ на: комментарий от PolarFox

Да идите вы лесом.

Как жаль, что в файрфоксе нельзя отдельно отключить CSS-спрайты, правда? Вот было бы круто убить все способы минимизации числа HTTP-запросов.

AP ★★★★★ ()
Ответ на: комментарий от AP

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

PolarFox ★★★★★ ()
Ответ на: комментарий от mine

http://4.bp.blogspot.com/_SE4xAsbWLBI/SF50kfRuv3I/AAAAAAAAAEc/NE1_OFdUesA/s16...

Панель сверху, только индикатор раскладки цветной. Не нравится мне, когда в верхней панели цветные иконки - это какой-то вырвиглаз. Поэтому использую Faenza в Gnome2 - монохромные иконки в панели, в глазах не рябит. Чтобы не про банальное рабство, то вот про то же самое в KDE: http://www.opennet.ru/opennews/art.shtml?num=27572

anonymous ()
Ответ на: комментарий от AP

Чувак в свой обкоцаный промо-пак натолкал иконок из айконика и энтипы, и говорит всем, что он аццки крут.

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

Vit ★★★★★ ()
Ответ на: комментарий от anonymous

По первой ссылке полторы иконки говняного качества. По второй если выкинуть фиговые, то останется где-то четверть, ради которой мало смысла заморачиваться (аналоги уже есть).

Говняное качество - значит в маленьком разрешении получится полная каша. Ну и стиль там... так себе...

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

Vit ★★★★★ ()
Ответ на: комментарий от anonymous

Отлично! Из овер 50 родных иконок макосятины выбрать 7 и говорить, что они отображают общий тренд. Правая панель сплошь цветная. Лого эппла - с градиентом, а индикатор зарядки двуцветен. Читай - цветное. Иконки папок и файлов тоже цветные.

Про кде - это было самое убогое изменение, которое они сделали. Хотя то, что КДЕ скатилось в УГ, - ни для кого не секрет. И всё равно иконки у них таки не монохромные.

mine ()
Ответ на: комментарий от s9gf4ult

Он в старых браузерах будет только через тормозные костыли. И из-за отсутствия хинтинга будет на мелких размерах ужасное мыло.

Проблема не «склеить чего-то куда-то», а показать потом везде и в хорошем качестве.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Спасибо за проделанный труд. Со свободными шрифтами совсем швах. Из представленных шрифтов знал только об Iconic. А чем Fortello лучше того же FontForge?

anonymous ()
Ответ на: комментарий от anonymous

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

Фонтелла использует фонтфорж как одну из частей. Но даже чисто технически, фонтфорж не понимает EOT и имеет устаревшие алгоритмы хинтинга.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Если FontForge не очень-то и подходит, то что используется для создания символьных шрифтов? Например, если захотеть нарисовать свою иконку с нормальным хинтингом, чем воспользоваться для этого?

anonymous ()
Ответ на: комментарий от mine

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

Или ты и текст предпочитаешь читать с разноцветными буквами с завитушками?

anonymous ()
Ответ на: комментарий от anonymous

Я не знаю, в чем удобно рисовать шрифты. Здесь фонтфорж используется, чтобы импортировать SVG-картинки и отписывать ttf/woff/svg-фррматы шрифтов.

Наверное, вам лучше посмотреть исходники того же Entypo https://github.com/fontello/entypo . Сделайте аналогичный репозиторий, только со своими картинками, поправьте конфиг, и собирайте мейком. Так был сделан Brandico https://github.com/fontello/brandico.font

Vit ★★★★★ ()
Ответ на: комментарий от anonymous

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

Например иконка «батарейки»: зелёное - все ок (от сети или на батареях, заряд есть) зеленое с желтым - заряжаемся красное - пора выключаться или искать зарядку, аккум в нулях

Сразу в фоне это видно и обращаешь внимаение. Серое на сером - пока сам не вспомнишь, не заметишь. А вспонишь еще и всматриваться придётся - что там такое накарябали горе дезигнеры...

mine ()
Ответ на: комментарий от Vit

прочел вику про хинтинг, теперь понятно зачем.

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

s9gf4ult ★★ ()
Ответ на: комментарий от s9gf4ult

Хинтинг как раз выруливает на десктопах, где пиксели большие. А на маленьких экранах пиксельные размеры надо увеличивать (что нормально не сделать на растре). Ну и проблему показа во всех браузерах никто не отменял.

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

Vit ★★★★★ ()
Ответ на: комментарий от mine

Например иконка «батарейки»: зелёное - все ок (от сети или на батареях, заряд есть) зеленое с желтым - заряжаемся красное - пора выключаться или искать зарядку, аккум в нулях

Ты еще скажи, что это нельзя сделать, не создавая вырвиглазную иконку. Которая бы еще не выглядела безобразно на малых размерах, что очень даже критично для трея. Разберись сначала с тем, что такое монохромный цвет. Если оставить в покое заряд батареи, где еще нужна такая информативность со сменой цвета? А то уж какой-то сильно натянутый пример получается. Огромный плюс монохромной иконки - её можно сделать так, чтобы не выделялась на фоне текста, к тому же, если использовать CSS правила для нее, как для текста.

Серое на сером - пока сам не вспомнишь, не заметишь.

Серое != монохромное, уж выучи наконец.

А вспонишь еще и всматриваться придётся - что там такое накарябали горе дезигнеры...

Сделать монохромную иконку на порядок проще, так что «горе дезигнеры» скорее что-то невообразимое накарябают, используя +100500 цветов, не зная даже о том, что цвета в первую очередь должны сочетаться друг с другом.

anonymous ()

Палю статистику:

http://imm.io/oQ4H

Лор в 2 раза круче опеннета :) . На опеннете в комментах вообще песец.

Vit ★★★★★ ()

Vit — мужик. Ты же один из разработчиков? Или один разработчик? И делал это всё на Node.JS?

sphericalhorse ★★★★ ()
Ответ на: комментарий от anonymous

Лучше сюда https://github.com/fontello/fontello/graphs/contributors .

От меня там «идея», трохи баблосов, и вёрстка. Первая итерация стала возможна благодаря Роме (shmelev). Кстати, человек нашелся по объявлению с ЛОР-а.

Потом поменялась концепция, и понадобилось привернуть серверсайдную вундервафлю. Во-первых, потому что полный набор шрифтов на клиенте не сделать. А во-вторых, потому что пора начать тестировать нодековские библиотеки на чем-то реальном.

Vit ★★★★★ ()
Ответ на: комментарий от Vit

Фичреквест: возможность подгружать иконки с других мест, поскольку трех полноценных шрифтов как-то уж совсем мало. Тем более, home-icon почти неотличима в Entypo и Font Awesome. Итого, с учетом Iconic, получаем всего две вариации одной из самых распространенных иконок для ссылок на главную. Также вкусы могут быть у всех разные, да и не всегда критично, как иконка выглядит на малых размерах (наверное, меньше 16px уже особо и не используются). А то слишком уж аскетично всё выглядит на Fontello.

anonymous ()
Ответ на: комментарий от anonymous

Вот! запомните это сообщение! Простой скромный аноним с лора предложил фичу импорта иконок. А то потом кейамунчег опять будет истерить, что я спиздил его очередную идею, ведь она гениальна и ее мог придумать только он спустя пиццоттыщ лет исследований :)

Ну а тем кому срочно, могут наимпортить тут http://keyamoon.com/icomoon/app/ . Только потом лучше SVG фонтсквиретом прогнать. Потому что кейамуну в анабиозе лекций по хинтингу не читали.

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

https://github.com/fontello/fontello/issues/5 - тут можно добавлять аргументы, почему импорт офегенно крут и всем офигенно нужен. Я его, честно говоря, в самый конец задвинул.

Vit ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.