Значок шрифтов против изображений

Мой менеджер говорит мне не использовать значки на наших сайтах, так как это еще один http-запрос плюс дополнительные kB для загрузки. Кроме того, потому что мне придется использовать content before для шрифта (я не могу изменить html), он предпочитает фоновые изображения, поэтому он работает в IE7.

Лично мне нравятся мелочи, такие приятные и четкие и изменчивые!

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

Я просто присоска для чего-то нового и захватывающего, и в этом году это экран сетчатки.

Ответ 1

Значки шрифтов и экранов с высокой плотностью

Использование значков шрифтов будет более актуальным, так как станут доступны дисплеи с более высоким разрешением/плотности.

Значок 16×16px может выглядеть ужасно на дисплее с высокой плотностью ( > 300ppi). Он может отображаться невероятно маленьким или нерезким из-за автоматического масштабирования. Значок шрифта 1em, с другой стороны, будет отображаться правильно и резко, независимо от плотности экрана.

Конечно, все сводится к вашему

пользователей приложений и
ваши требования (IE7, кажется, главный выключатель)

Теперь спрайты - это путь.

МИНУСЫ?

Значок шрифтов также имеет другую проблему. Все значки одного цвета. Нет стандартного шрифта, поскольку он еще не имеет многоцветных возможностей. И этого, скорее всего, не будет. По крайней мере, не для шрифтов. Есть возможности делать многоцветные шрифты с использованием SVG-шрифтов, которые не являются стандартом шрифта/форматом, но могут быть контейнером шрифтов и использоваться в качестве механизма доставки шрифтов в вашем браузере. Использование многоцветных значков в качестве шрифтов SVG позволяет иметь красочные масштабируемые значки (благодаря @Joey).

Векторизованные изображения икон лучше подходят для полноцветных изменяемых размеров значков.

Запросы и значки шрифтов

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

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

Ответ 2

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

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

http://fontello.com/

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

http://www.icnfnt.com/ делает то же самое для fontawesome, но я вроде как больше fontello, потому что он позволяет использовать больше шрифтов.

Значки шрифтов - это путь честно по-моему...

EDIT В последнее время я слишком много использую это приложение: http://icomoon.io/

Ответ 3

При использовании шрифтов разные браузеры на разных платформах будут давать разные результаты. Файлы PNG дадут стабильные и независимые результаты.

Ответ 4

Он прав. В этом случае я использовал css спрайты. И если вам нужно поддержать ie7 (мне очень жаль), у вас действительно нет вариантов. Изучая эти вещи самостоятельно - конечно, вы никогда не знаете, что пригодится или когда.

Ответ 5

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

Используйте Fontsquirrel, чтобы сделать webfont и вставить его на свой сайт через ваш css и добавить его в свой ftp-каталог, если это не получается а затем используйте веб-шрифты google

Если это не похоже на это, я должен пойти на решение для изображения, которое сказал ваш босс.

Все это также зависит от того, сколько времени вы должны решить, и что такое

Btw, если вы не можете получить доступ к html, я подумал, что вы можете получить доступ к css, который вы можете сделать через большинство бэкэндов, если вы не можете перейти к изображению!

И последнее, но не менее важное: если вы решите пойти с решением изображения, сделайте спрайт, который вы направляете корытом на фоновое положение. Таким образом, вам нужно загрузить только 1 изображение для всех ваших маленьких значков.

Ответ 6

Я реализовал библиотеку значков шрифтов, используя icomoon, и он хорошо работает во всех браузерах, включая ie7. Для небольших наборов значков это подходящая практика, размер шрифта должным образом, можно изменить на любой цвет, который вам нужен, и вам не нужно беспокоиться о прозрачных цветовых цветах PNG/GIF.

Однако... Если ваша библиотека становится больше (у меня сейчас около 40 значков), становится все труднее поддерживать. Если дизайнер перестает работать над проектом или вам нужно изменить значки, это кропотливый процесс обновления шрифтов. Все, что нужно, нужно повторить. Также сложно динамически значки с помощью CSS (для ie7).

Итак, учитывая сложность обслуживания, я подумываю о возвращении к серии спрайтов (разных цветов). Причины:

Любой дизайнер может легко добавить новый значок в набор. CSS не нужно проверять или изменять. Вам не нужно обходиться с обходными методами JavaScript для IE. Вам вообще не нужен javascript.

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