Иконки шрифтов vs png icons

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

Но когда я создаю шрифт со значками, он больше, чем все мои значки, потому что есть svg, ttf, woff и eot, все эти 4 шрифта больше, чем все значки png.

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

Все мои значки - это optipng сжатые .png изображения.

Это работает во всех браузерах?

Так почему я должен использовать этот метод шрифта?

И любая альтернатива для fontello.com?

Ответ 1

Хороший вопрос. В настоящее время я экспериментирую с Fontello и значками шрифтов, чтобы убедиться, что это жизнеспособный подход.

Это жизнеспособный подход. Я использовал значки на основе шрифтов в производственных приложениях и тестировался практически на каждом популярном браузере/устройстве (у Fontello есть примеры, которые поддерживают IE7). У меня есть только хорошие вещи, чтобы сказать о Fontello, но вы можете использовать любой инструмент, который вам нужен.

Значки шрифтов могут масштабироваться до любых любых (пропорциональных) размеров и работать с любой плотностью пикселей. Если вы посмотрите на свой сайт на дисплее с высокой плотностью (например, Apple Retina и все более популярным на всех мобильных устройствах), существует огромное различие между растровым форматом (например, PNG) и векторным форматом.

Вы можете определить все значки в одном файле (например, спрайт), но в отличие от спрайта вам не нужно беспокоиться о размерах элементов в файле. Кроме того, вы можете масштабировать каждый элемент независимо от других элементов в файле.

Вопросы

Вам нужно будет управлять файлом шрифта. Они не читаются человеком, поэтому вам нужно будет использовать инструмент.
Есть соответствующие CSS-селектора для поддержки (обычно один селектор на значок).
Иногда требуется дополнительная разметка для достижения определенного эффекта/устранения проблемы.
Незначительные размеры вопросов; не все значки заполняют ящик равномерно, и они подвержены особенностям отображения текста каждого браузера.

Эти соображения, вероятно, меньше, чем использование спрайтов или создание PNG/SVG для каждой иконки.

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

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

Альтернативный подход заключается в использовании SVG (а не шрифтов SVG) для значков. Поддержка браузеров для SVG меньше, чем для @font-face, поэтому вам понадобится резервный запас растра.

Ответ 2

Этот удобный сайт показывает, что с помощью CSS-функций поддерживается браузер. В этом случае < IE9 может дать вам проблемы.

http://caniuse.com/#feat=fontface

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

Ответ 3

быстрый отказ от ответственности: я работал над библиотекой шрифтов значков, называемой pictonic.

когда я создаю шрифт с иконками, он больше, чем все мои значки, потому что есть svg, ttf, woff и eot, все эти 4 шрифта больше что все значки png.

с точки зрения размера файла, вы можете найти следующее сравнение интересных символов pngs vs icon:

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

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

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

Это работает во всех браузерах?

зависит от того, какие методы вы используете. pictonic тестируется во всех браузерах обратно на ie5, но требует бит js для старых версий ie (5-7). Таким образом, в теории его можно получить значки шрифтов, работающих во всех браузерах.

Так почему я должен использовать этот метод шрифта?

Значки шрифтов на самом деле универсальны, вы можете манипулировать ими css таким образом, чтобы изображения могли казаться довольно негибкими. Вот демонстрация: https://pictonic.co/#main-demo

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

так как они основаны на векторе, они готовы к установке сетчатки, поэтому они выглядят потрясающе на сетчатых экранах, например, на дисплеях сетчатки яблони (сетчатка macbook, iphone 4+, ipad3 +), тогда как изображения требуют медиа-запросов swap в версиях с двойным разрешением, которые занимают еще больше места.

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

И любая альтернатива для fontello.com?

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

Ответ 4

Еще одна альтернатива для вас может быть: http://fontastic.me/

;)

Ответ 5

С иконками шрифтов вы включаете файл шрифта, который имеет расширение .woff,.ttf,.eot,.svg и файл css для этого шрифта. Они меньше по размеру, и при необходимости вы можете изменить размер значка, при этом файлы изображений png/jpeg искажают файл изображения, где в качестве значков шрифтов правильно отображаются.
С несколькими изображениями вы должны сделать несколько запросов HTTP на сервер, чего можно избежать здесь.
Файлы значков шрифтов также доступны на cdn, поэтому вам не нужно запрашивать его с сервера, если какой-то более ранний веб-сайт уже кэшировал его в вашем браузере.
С помощью fontello вы можете настроить и использовать только нужные значки.
Существует также fontovesome текущая версия 4.2, где вы можете получить значки шрифтов, если вам нужна поддержка более старой версии браузеров, вы можете выбрать старую версию № 3.
Вы также можете настроить его с помощью LESS/SASS.
Другим вариантом является использование спрайтов css, которые вы можете оптимизировать, используя традиционные методы или используя онлайн-сервисы.
Использование этого в html довольно просто, как только вы убедитесь, что файлы css и файлы шрифтов загружены в браузере, вам просто нужно добавить имя класса в элемент html, и вам хорошо идти, вы можете настроить шрифт размер, цвет, цвет фона по вашему желанию.

Шрифт awesome

Fontello

Здесь вы можете найти CDN