Что происходит с этим значком?

Я создал значок для веб-страницы с линиями 2 пикселя и размерами 42x42 (пикселя), но когда я помещаю его на веб-страницу, линии размываются, см. Изображениевведите описание изображения здесь

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

Как я могу сделать линии, чтобы они не были размыты?

Взгляните на эти два ответа. Они могут помочь: graphicdesign.stackexchange.com/questions/48949/… graphicdesign.stackexchange.com/questions/29719/…
Как упомянул @Naty, в приведенном выше примере красный образец имеет размер 42x42 и имеет четкие линии. Образец белого на черном изображении имеет размер всего 35x35. Если ваше изображение не отображается в исходном размере в браузере, то, скорее всего, в результате вы получите некоторое размытие. Вам нужно спроектировать свою иконку так, чтобы она была идеальной по пикселям и соответствовала размеру, который вы хотите отобразить.

Ответы (2)

Ваша проблема в том, что вы не разрабатываете pixe perfectиконку и не загружаете ее точного размера.
Простое решение — просто загрузить svg, и для этого есть 2 варианта:

  1. Загрузить и значок .svg
  2. Преобразование значка в шрифт, что в основном то же самое, что и загрузка svg на веб-сайт. (На самом деле вы загружаете svg в шрифты значков)

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

Спасибо за помощь, сейчас посмотрю как сделать pixel perfect icon
@OsmanyRodríguez это может помочь: photoshoptutorials.ws/photoshop-tutorials/layouts/…
спасибо за помощь, я уже смог исправить все иконки

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

Проверьте эту ссылку:

http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/

Затем вы можете изменить размер с помощью CSS.

Надеюсь, что это работает.

Спасибо за ваш ответ, я тоже это сделаю, но проблема в том, что я встраиваю изображение в уже созданную тему, поэтому, к сожалению, мне нужно использовать png :( Может быть, вы можете найти решение для размытого линии на png?Спасибо за ваше время.
Шрифты также имеют сглаживание, поэтому это не обязательно решит проблему.
Что происходит с этим значком?
СпросиСетьПолитика конфиденциальности1y, 0v