Всё для сайтов

Когда на сайте применён шрифт с иконками, а задействовано лишь несколько значков, всегда есть желание удалить из файла лишние иконки. Расскажем как это сделать.

Полезные сведения

Генератор иконографического шрифта с малым размером файла

Генератор шрифта Fontello (титульная картинка)

В современной вёрстке сайта часто применяются иконки. Существуют разные иконографические шрифты, они предлагают множество изображений. Однако на практике сайтом используется лишь несколько символов из конкретного шрифта. И тут возникает вопрос: как оставить в шрифте только используемые иконки, чтобы сократить размер файла?

Решение такого вопроса предлагает сервис Fontello - генератор шрифта только с тем набором иконок, какие вы пометили для себя.

То есть на главной странице сервис демонстрирует вам некоторый набор шрифтов с изображением всех символов каждого шрифта. Сейчас этот набор состоит из таких шрифтов:

  • Fontelico - смайлики, 34 символа
  • Font Awesome - разное, 479 символа
  • Entypo - разное, 284 символа
  • Typicons - разное, 308 символов
  • Iconic - разное, 151 символ
  • Modern Pictograms - разное, 91 символ
  • Meteocons - погода, 47 символов
  • MFG Labs - разное, 153 символа
  • Maki - знаки, 63 символа
  • Zocial - логотипы приложений и сервисов, 103 символа
  • Brandico - логотипы соцсетей, 45 символов
  • Elusive - разное, 271 символ
  • Linecons - контурные, 48 символов
  • Web Symbols - для сайтов, 85 символов
  • Custom Icons - отдельное поле, куда можете добавить другие иконки и шрифты

Дальше всё просто

Вам нужно кликнуть по тем иконкам, которые хотите получить в шрифте, и в завершение нажать кнопку Download webfont. В результате получаете архив со своим шрифтом (там четыре формата: eot, woff, ttf, svg под все виды браузеров). Там же находятся стили шрифта - это файл fontello.css.

Если стремитесь предельно сократить количество файлов, подгружаемых к вашей вёрстке, тогда из четырёх форматов иконографического шрифта используйте только ttf (для Chrome 4+, Firefox 3.5+, Opera 10+, Safari 3.1+, IE 9+, Android 2.2+) и формат svg (для iOS 1+).

Похожие публикации

Обсуждение

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

Другие обсуждения »

Теги: fontello, генератор шрифта, fontelico, font awesome, entypo, typicons, iconic, modern pictograms, meteocons, mfg labs, maki, zocial, brandico, elusive, linecons, web symbols

Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.

Предложить

Следите за нашими публикациями в социальных сетях и новостных каналах.