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

😺

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

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

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

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

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

Тени не нужны

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

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

если бы меня 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как-то так(

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Странный результат уже на первой попытке. Берем SVG пешку http://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg
Она белая, а при вставке в Fontello выглядит как полностью черная.

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

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

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

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

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

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

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

О, там font-awesome оказывается тоже есть =)

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

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

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

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

И чё, на каждое разрешение по png?

проблемы негров... ну вы в курсе

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

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

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

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

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

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

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

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

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

Fontello-codes гляну, thanx

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

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

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

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

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

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