LINUX.ORG.RU

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

 ,


4

2

Вчера состоялось большое обновление проекта Fontello. Теперь вы не ограничены выбором встроенных иконок - можно импортировать собственные svg-изображения и svg-шрифты (под нарезку).

Большая задержка с добавлением импорта была вызвана желанием показывать все иконки именно так, как они получатся после генерации шрифта. Для этого понадобилось написать на javascript свой генератор ttf, который прямо в браузере строит фонт из импортированных изображений. Работа очень большая, но результат того стоил. Кроме того, для гиков добавлено API, и можно прямо из командной строки загрузить конфигурацию проекта и скачать результат.

Fontello - проект для дизайнеров и разработчиков вебсайтов. Если Twitter Bootstrap предоставляет вам набор CSS-классов для быстрой и легкой верстки страниц, то Fontello позволяет вам легко добавить на эти страницы иконки. Вы можете выбрать иконки из очень большой подборки, а Fontello упакует их в шрифты и сделает файл с CSS-классами. Дальше остается добавить нужный класс к HTML-элементу, и рядом появится картинка.

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

Код проекта и всех компонент для работы со шрифтами выложен на github. Лицензия - MIT.

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

★★★★★

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

А для слоупоков, чем это лучше вставки SVG иконки?

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

Что лучше 1 шрифт со всеми нужными иконками или 100500 svg файлов? + у шрифта можно менять цвет, добавлять тени через ксс и другое

xorik ★★★★★ ()

Сам ЛОР его юзает! :)

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

Ну, этого вопроса бы не было, если бы меня 100500 svg файлов не устраивало :)

У шрифта плохо, что цвет может быть только один, но, впрочем, для модных сейчас монохромных иконок нормально, пожалуй. В SVG есть параметры для этого, но, AFAIR ничего их не умело. Надо будет проверить…

Тени не нужны

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

Тогда особого профита нет, может быть только размер (svg всё-таки текстовый, но если сервак умеет сжимать файлы, то и это не плюс)

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

Удобнее с практической точки зрения. Плюс SVG поддерживают не все.

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

если бы меня 100500 svg файлов не устраивало :)

100500 svg файлов — 100500 запросов к серверу

У шрифта плохо, что цвет может быть только один

<button type="button" class="icon-ok" style="color:#0f0;">Ok</button>
<button type="button" class="icon-cancel color-yellow">Cancel</button>
<button type="button" class="icon-delete color-warning">Delete</button>
metrokto ★★ ()
Ответ на: комментарий от metrokto

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

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

На одной странице обычно все 100500 файлов всё равно не нужны.

Имелось в виду, конечно, более одного цвета на иконку.

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

А если нужно добавить 1 иконку, то придётся перегенерить весь шрифт заново? И чем лучше FontForge, кстати?

lipstick ()

Показ графики с помощью шрифтов - современный тренд, за который надо отрывать яйца, не говоря уж о руках.

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

А если нужно добавить 1 иконку, то придётся перегенерить весь шрифт заново?

Конечно, либо второй шрифт добавлять с одной иконкой :-D

И чем лучше FontForge, кстати?

Не знаю, я вообще этим делом не занимался, просто ответил тов. Mystra_x64 своё мнение

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

Да, шрифт нужно перегенерить. Но на фонтелле есть все, чтобы сделать это легко и быстро.

Лучше фонтфоржа тем, что простым смертным не надо ставить фонтфорж, и ковыряться в нем. Плюс автоматически делаются CSS. Это вопрос из серии «а зачем нужен twitter bootstrap, если все можно руками написать».

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

Да понятно с цветами конечно. Но в реальной жизни это скорее повод для троллинга, чем потребность :)

Иконки обычно втыкаются рядом с текстом, поэтому на практике очень удобно рулить ими через CSS, как и остальные элементы страницы.

Vit ★★★★★ ()

позволяет вам не заботится о том, как

позволяет что делаТЬ

ну или уж сразу: «позволяеть не заботится». и харакири тут же.

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

На сколько я знаю SVG растеризуется медленнее, что в общем-то логично: формат явно сложнее.

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

Но в реальной жизни это скорее повод для троллинга, чем потребность

У меня с тех времён, когда в кедах ввели монохромные иконки, ещё йогурт не прошёл %)

Deleted ()

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

Не, я знаю про AdBlock, но блин. Как же надоело все сайты с иконками в исключения прописывать.

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

Да, было бы неплохо. А то из-за умельцев, превращающих тексты в УГ, потом льются потоки ненависти на щрифтовые иконки.

Vit ★★★★★ ()

Как же нужно было неделю назад... Даже не думал, что такое уже есть в природе. Очень нужно, очень.

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

Преимущества очевидны:

  • не нужно готовить графику для сайта;
  • не нужно каких-либо дополнительных инструментов редактирования - только css.

Недостатки очевидны:

  • только монохромные изображения.

Недостатки svg:

  • нельзя добавить на canvas.

Недостатки пиксельной графики:

  • Хрен его знает как оно вообще будет отображаться, на всем спектре устройств.. с нынешними-то браузерами.

Как-то так(

special-k ★★★ ()
Ответ на: комментарий от Centaur

Кстати, а приколачивание шрифтов гвоздями вызвано желанием ВЕЗДЕ видеть одно и то же, или необходимостью посещать сайты, где авторы превратили текст в УГ?

Vit ★★★★★ ()

javascript свой генератор ttf

а на сервер оно зачем ходит?

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

Ну там шаблончики покнопелять, в архивчик сложить, хинтинг наложить если попросят.

В принципе, можно и в браузер целиком засунуть, если задаться целью. Но download через data-uri в лисе будет глючить без флешовых костылей. Ну и для чистоты кода пришлось бы несколько сторонних библиотек перелопатить (наши полностью прозрачны) - время, время...

Просто не было практического смысла в браузер засовывать полностью. С сервером чуть-чуть проще.

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

Я как раз посмотрел сейчас в фф с 20 версии наверно уже не должно глючить https://github.com/eligrey/FileSaver.js

Еще можно было бы отправлять на какое-нибудь хранилище, вместо сохранения.

С сервером чуть-чуть проще.

Прикольно же когда сервер не нужен)

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

Прикольно же когда сервер не нужен)

Мне решение этой задачи не доставит фана. Поэтому влом таким заниматься.

Если сильно хочется - код открыт :)

Vit ★★★★★ ()

обычно на лоре всё смешивают с ненужно
что-то тут не так 😒

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

Fontello на ЛОРе используется, поэтому не рискуют смешивать сабж с говном во избежание гнева maxcom-а. :-)

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

Потому что там ОДИН контур, нарисованный толстой линией.

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

Если сами рисуете - смело грохайте все заливки и толщины линий. Тогда будете видеть ровно то что импортируется. Потом перед экспортом в SVG объедините все контуры в один, и редактор автоматически расставит правильные развороты.

Надо будет в импортер предупреждение добавить, когда у линий ширина указана.

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

Превратить текст в УГ проще простого, даже не надо загружаемых шрифтов. Достаточно сказать «font-family: Helvetica» — и у пользователей Ubuntu будет отображаться Nimbus Sans L.

И да, у меня есть по одному предпочитаемому шрифту для каждого семейства (sans, serif и monospace) и я хочу body text видеть именно ими. Согласен на дизайнерские заголовки.

Centaur ()

Вдруг кто-то ещё не знает: есть классный font-awesome.

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

Что лучше 1 шрифт со всеми нужными иконками или 100500 svg файлов?

Самый правильный вариант - собрать все иконки в полосу в png, и клипать через css. Использовать шрифт для показа картинок - дурацкий костыль.

annulen ★★★★★ ()
Последнее исправление: annulen (всего исправлений: 1)
Ответ на: комментарий от xorik

Что лучше 1 шрифт со всеми нужными иконками или 100500 svg файлов?

Подумали дизайнеры гитхаба и запилили свои <censored> Octicons. Теперь для каждого такого выпендрёжника нужно писать правила в стайлише. Это успех!

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

Представь себе, да. Посомтри, например, на темы значков для KDE или GNOME - для каждого разрешения свой набор. Рендерится в автоматическом режиме из векторного источника

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

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

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

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

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

Даже если это все нарендерить (но зачем, если можно юзать вектор?), угадать разрешение на сервере не получится, придётся через js, это всё костыли. Веб должен стать полностью векторным, иначе развалится.

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

Этот прием всем известен. Просто управлять таким при разработке - конкретная жопа. Поэтому шрифты и любят - там все через CSS подкручивается, и не надо париться с версиями для мобилок.

Vit ★★★★★ ()

А не мог бы приделать возможность при генерации задать путь для URL по которому шрифт будет лежать? Я его приклеиваю к большому CSS и из-за этого приходится руками пути исправлять

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

Там же есть голый CSS c кодами. Пропиши fontface какой надо один раз, а из архива фонтеллы приклеивай файл `./css/fontello-codes.css`

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

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

У меня сейчас нет под рукой исходников, но суть в том что в основном CSS пути содержат '..' и оно перестает работать когда я подключаю его к CSS который лежит по другому пути.

Fontello-codes гляну, thanx

maxcom ★★★★★ ()

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

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

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

Думаю, ты просто не просек раньше фишку с файлом стилей без fontface. Он решит твои проблемы и развеит твои печали :)

На самой фонтелле аналогично сделано, никто руками ничего не правит https://github.com/fontello/fontello/blob/master/assets/icons/index.css.ejs

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

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

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

Ага, то есть практически ко всем? Нет, спасибо. У меня конечно есть костыль в стайлише, но он вот такие кнопочные шрифты крайне не любит.

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