использование векторных иконок в качестве веб-шрифтов вместо PNG в jQuery UI CSS Framework

У меня общая проблема с пониманием, и мне неясно, как лучше всего двигаться дальше. Поэтому я решил спросить совета у сообщества.

Пользовательский интерфейс jQuery определяет CSS Framework, который содержит класс "ui -icon "и множество специальных классов для различных стандартных значков (Всего 320 значков), который можно увидеть на тестовой странице.. Есть много плагинов, веб-сайтов и т. Д., Которые используют фреймворк CSS. Например, jqGrid используйте его. Сетка, которая будет создана jqGrid, содержит значки.

После написания ответа об использовании Значки Font Awesome вместо некоторых значки пользовательского интерфейса jQuery Я регулярно задаю себе один и тот же вопрос: почему В jQuery UI CSS framework есть растровые значки вместо векторных значков? На мой взгляд, было бы очень практично иметь другую реализацию части Icon в jQuery UI CSS Framework. В этом случае можно просто заменить тему пользовательского интерфейса jQuery и иметь значки, которые реализованы лучше.

Мы живем во времена мониторов с высоким DPI (мероприятие для планшетов и смартфонов). Очень многие люди используют настройку масштабирования выше 100% в качестве стандартной настройки в веб-браузере. Если сравнивать
введите здесь описание изображения
с
введите здесь описание изображения
можно будет увидеть различия очень четко.

Текущие версии веб-браузеров (включая старый IE7) поддерживают векторные веб-шрифты как минимум в одном из форматов WOFF, EOT, TTF, OTF или SVG. Шрифты являются частью рабочего проекта документа W3C «CSS Fonts Module Level 3» (см. http://www.w3.org/TR/css3-fonts/#src-desc).

Так почему бы не заменить текущие значки PNG в пользовательском интерфейсе jQuery на альтернативные веб-шрифты? Существует множество бесплатных шрифтов с открытым исходным кодом, которые уже предоставляются (см. здесь, здесь, здесь, здесь и т. д.) больше всего (но не все) иконки, которые нужны.

Дополнительным преимуществом использования веб-шрифтов, которое я вижу, будет упрощение создания тем пользовательского интерфейса jQuery. Если я сравниваю изображения ui-icons_XXX_256x240.png, используемые внутри базовой темы, или если я сравниваю их с соответствующими изображениями другой темы, я вижу цвет, используемый в изображениях, как единственную разницу между . В случае использования векторных шрифтов можно просто указать color, background-color или использовать linear-gradient или radial-gradient стили CSS для изменения цвета или создания приятных цветовых эффектов:
 введите описание изображения здесь

Я вижу много преимуществ в использовании векторных иконок, но до сих пор не нашел подходящего места, где можно было бы разместить запрос функции для векторных иконок. Я опубликовал запрос функции и this one, но я все больше думаю, что у нас здесь общая проблема jQuery UI Framework.

После выпуска jQuery 2.0, в котором прекращается поддержка IE 6/7/8. Не пора ли подумать о замене растровых иконок PNG на векторные веб-шрифты?

Возможно, я упустил некоторые важные недостатки использования векторных веб-шрифтов? Например, очень плохая производительность (которую я не видел до сих пор) или что-то еще? Не слишком ли сложно создать все необходимые значки? Есть ли другие проблемы?

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

Как лучше всего разместить такой запрос функции? Я должен добавить, что создание шрифтов или изображений - не та тема, в которой я сам хорош. Так что я сам не могу участвовать в реализации. Извините.

Любые советы или ваши мнения по теме приветствуются!


person Oleg    schedule 19.04.2013    source источник


Ответы (1)


Шрифты не подходят для реализации значков. Посмотрите на дорожные знаки - нужно не менее трех цветов. Для этой цели шрифты будут заменены на SVG или аналогичный формат, возможно с подсказками.

почему jQuery UI framework имеет растровые значки вместо векторных

Думаю, из-за отсутствия на данный момент стандартов реализации векторных иконок.

Сложно ли создание всех необходимых иконок? Есть еще какие-то проблемы?

Да, не так-то просто создать все значки внутри шрифта, которые хорошо работают во всех браузерах. Но есть еще одна проблема. Хорошее решение - реализовать логотип Google в векторном формате, а не в растровом. Как видите, этого еще не произошло.

person yakunins    schedule 29.04.2013
comment
спасибо за ответ, но я не понимаю, что вы имеете в виду, говоря о требованиях как минимум трех цветов. Стандарт W3 находится на стадии рабочего проекта, и различные веб-браузеры теперь позволяют использовать хотя бы один из форматов шрифтов. Если определить CSS классов пользовательского интерфейса jQurey, например ui-icon-trash или ui-icon-seek-next, используя шрифты с откатом к PNG (или условный CSS, например <!--[if IE 7]>), то я не вижу проблем. Если бы я использовал такой CSS, я вижу только преимущества. Если следующая версия CSS будет использовать SVG вместо WOFF, TTF для меня это не имеет значения. - person Oleg; 29.04.2013
comment
Я имею в виду, что использование шрифтов для отображения значков - это хитрость. Этот метод будет заменен на правильный. - person yakunins; 29.04.2013
comment
С точки зрения пользователя, который использует CSS с иконкой, мне нужно разместить классы ui-icon ui-icon-Triangle-1-n из jQuery UI CSS, чтобы иметь растровую иконку. Если бы я добавил вместо этого сортировку значков классов на здравомыслящем <span>, у меня бы вместо этого был растровый значок. Итак, мой вопрос: почему бы не иметь CSS, который определен, как и раньше, с помощью ui-icon и ui-icon-Triangle-1-n, но который использует определение из сортировки значков с небольшим изменением положения значка? В CA я бы мог использовать старый код на HTML-странице, но у меня будет некоторая реализация векторных значков вместо старых растровых значков. - person Oleg; 29.04.2013
comment
Почему использование иконок - это хитрость? Посмотрите стандарт UNICODE. Он содержит множество символов, используемых в математике, физике, графике и так далее. Таким же образом jQuery UI Framework определяет набор значков, которые могут использовать люди, которые создают веб-сайты с использованием jQuery UI. Почему значки должны быть реализованы как растровые изображения? - person Oleg; 29.04.2013
comment
Вот пример правильно реализованного значка: ‹img src = google-logo.svg alt = google /› Bingo! - person yakunins; 29.04.2013
comment
@Oleg ›Почему использование иконок - это хак? Я сказал, что использование шрифта (для рисования значка) - это хитрость. Вот путь хакера: ‹span class = google-logo› ‹i› G ‹/i› ‹i› o ‹/i› ‹i› o ‹/i› ‹i› g ‹/i› ‹i ›L ‹/i› ‹i› e ‹/i› ‹/span› с большим количеством CSS где-то. - person yakunins; 29.04.2013
comment
Извините, но разница между хакером и не-хакером в приведенных выше примерах заключается только в том, используется ли одно изображение или фоновое изображение. Кроме того, мой вопрос касался jQuery UI CSS Framework определяет другой интерфейс использования значков jQuery UI Framework. Нужно использовать классы CSS, которые предлагают jQuery UI: класс ui-icon и некоторый класс, специфичный для значков, например ui-icon-Triangle-1-n. Мой вопрос касался реализации таких классов CSS. - person Oleg; 29.04.2013
comment
Существует множество веб-плагинов и веб-сайтов, которые уже используют классы так, как требуется jQuery UI CSS Framework. Мой вопрос касался изменения реализации существующих классов. Чтобы можно было заменить растровые значки на векторные без изменения существующих приложений. Нужно просто заменить jQuery UI CSS на другую версию, использующую новую реализацию. - person Oleg; 29.04.2013
comment
@Oleg Пожалуйста, исправьте и почистите свой вопрос по своему усмотрению, потому что вопрос, на который вам нужен был ответ, приходит только в комментариях. - person yakunins; 29.04.2013
comment
Я попытался сформулировать жирным шрифтом вопрос: почему в jQuery UI framework есть растровые значки вместо векторных? Я попытался включить примеры и изображения, но никто не идеален. Я добавлю слова jQuery UI CSS Framework в заголовок своего вопроса и, возможно, улучшу текст. - person Oleg; 29.04.2013