иконки шрифтов 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 ?

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

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

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

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

Соображения

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

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

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

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

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

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

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

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

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

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

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

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). Таким образом, в теории его можно получить значки шрифтов, работающих во всех браузерах.

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

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

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

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

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

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

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

Другой альтернативой для вас может быть: http://fontastic.me/

😉

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

Шрифт отличный

Fontello

Вы можете найти CDN здесь