QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Итак, практически на всех сайтах используются различного рода иконки. Будь то «Корзина покупок», ссылка на Twitter-аккаунт, RSS и т.д. И используются для этого изображения иконок. Все бы хорошо, но с приходом в нашу жизнь смартфонов, планшетных компьютеров и т.д. появилась проблемка. Заключается она в том, что в большинстве своем сейчас используются контурные или векторные шрифты, которые прекрасно масштабируются. А вот иконки — это растровые изображения, они как были одного размера (допустим 16х16px), так и остаются такими.

Как же можно повлиять на эту ситуацию? Просто! Нужно использовать шрифты, которые состоят из изображений необходимых нам иконок.

В чем плюсы использования этих шрифтов? А вот в чем:

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

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

При масштабировании качество не теряется. Это касается и различных гаджетов и простого увеличения в браузере.

Итак, вот сайты, с которых Вы можете скачать необходимый шрифт:

Шрифты подключаются очень просто. В файле стилей CSS необходимо указать следующую конструкцию:

@font-face {
    font-family: Fontname; /* имя шрифта для CSS правил */
    src: local("Fontname"), /* проверяем наличие шрифта в ОС пользователя */
         url(path-to/Fontname.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */
}

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

Вот и все! Надеюсь, данная информация будет для Вас полезной.