Сколько людей заходят на сайты с мобильных устройств — наша статистика
К сожалению до России все новые тенденции в разработке сайтов приходят с большим опозданием и иногда требуется не мало времени что бы принять новое и научиться правильно его использовать. Сегодня я хочу начать серию постов в которых подробно расскажу о иконочных шрифтах: недостатках и преимуществах, где их можно взять бесплатно, как установить и использовать.
Иконочные шрифты уже успели не только получить большое распространение на западных сайтах, но даже стать элементом “джентльменского набора” любого уважающего себя разработчика. Поэтому для начала разберемся зачем такие иконочные шрифты вообще нужны и оправдано ли их использование.
Что такое иконочный шрифт
Начну из далека =). Вспомним не далекое прошлое. Сейчас дисплеи высокого разрешения на планшетах мы воспринимаем как должное, но еще недавно это было скорее исключение чем правило. Первым планшетом в дисплеем Retina стал iPad 3. В чем же заключалась принципиальная разница в планшетом предыдущего поколения — только в разрешении экрана. Было разрешение дисплея 1024х768, стало 2048х1536. А на практике мы с вами увидели в 2-ва раза более четкую картинку.
Для тех кому лень читать
Недостатки использования иконок png/jpg на сайте:
- такие иконки размыто отображаются на дисплеях высокого разрешения;
- такие иконки увеличивают время загрузки страницы сайта;
- такие иконки размыто отображаются при изменении масштаба страницы;
- такие иконки вносят ряд существенных ограничений при использовании адаптивного дизайна сайта;
- при необходимости поменять цвет или размер иконки необходимо использовать исходный макет иконки и Photoshop.
Преимущества иконочного шрифта
Из ситуации описанной выше нашелся достаточно простой выход. Пиктограммы и иконки (монохромные (!)) начали использовать в формате шрифта (иконочный шрифт). Все мы привыкли к кириллическим или латинским шрифтам, различным гарнитурам. В иконочном шрифте каждый символ это не буква, а иконка. Использование иконочного шрифта и основные принципы работы с ним точно такие же как с обычным шрифтом. Вы можете в один клик, без использования графических программ: менять размер иконки (аналогично как вы меняете размер буквы или слова в тексте), изменять цвет, копировать и вставлять и т.д. Такой иконочный шрифт в не зависимости от разрешения дисплея и размера не потеряет качество и не станет размытым. А это открывает широкие возможности для использования таких иконочных шрифтов в сайтах. Даже если кто-то из производителей смартфонов решит в будущем еще сильнее увеличить разрешение, вам уже не надо будет перерисовывать иконки, вносить изменения на сайте. Все шрифтовые иконки всегда будут прекрасны! =)Для тех кому лень читать
Преимущества использования иконочного шрифта на сайте:
- иконочный шрифт всегда качественно отображаются на дисплеях с любым разрешением;
- шрифтовые иконки идеально подходят для адаптивного дизайна;
- страница сайта с иконочным шрифтом быстрее загружается;
- можно легко поменять размер и цвет иконки.
Проблемы с использованием иконочного шрифта
Но конечно в любой бочке меда есть своя ложка дегтя… Есть и с иконочными шрифтами проблемы. Как вы знаете все браузеры чуть по-разному отображают сайты, а браузеры используемые на мобильных платформах более всех грешат не постоянством. В зависимости от браузера и устройства иногда иконочный шрифт не подгружается.Случается это не так часто, но я бы слукавила, если бы не указала на это. Кроме того, если вы используете иконочный шрифт на своем локальном компьютере, заранее его установив, вам всегда нужно помнить что любой документ (например Word, Excel, PowerPoint и т.д.) оформленный с использованием таких иконок не будет корректно отображаться на другом компьютере если предварительно не установить нужный шрифтовой набор иконок. Кроме выше перечисленного добавлю что на иконочные шрифты распространяются все реже проблемы свойственные обычным шрифтам. Иконочный шрифт может быть только монохромным, т.е. иконки всегда будут только одноцветные.Для тех кому лень читать
Проблемы с использованием иконочного шрифта:
- шрифтовые иконки могут иногда не подгружаться в браузерах;
- при использовании шрифтовых иконок на локальном компьютере вам всегда нужно помнить что любой документ (например Word, Excel, PowerPoint и т.д.) оформленный с использованием таких иконок не будет корректно отображаться на другом компьютере если предварительно не установить нужный шрифтовой набор иконок;
- шрифтовые иконки могут быть только монохромными.
В следующих постах я подробно расскажу как установить иконочный шрифт, как правильно использовать его на сайте, где можно легально скачать бесплатные и платные шрифты.
Если статья была для вас полезна, то можете сказать спасибо 3 простыми способами:
-
Поделитесь ей в социальных сетях, чтобы не потерять:
4 -
Оцените статью от 1 до 5
(2 оценок, среднее: 5,00 из 5)
Загрузка... -
Напишите что именно не понравилось, я не буду публиковать ваш комментарий, но обязательно добавлю информацию: Может мало фото? Может нет той информации, которую вы искали? Напишите, пожалуйста!
Вам могут быть интересны
