Чёрные шрифты-иконки и способы их применения в дизайне сайта
При построении богатых визуальных интерфейсов дизайнеры использовали и используют целые наборы иконок для обозначения функциональных элементов сайта. Это могут быть кнопки отправки формы, сохранения результатов, экспорта отчётов, обновления данных, смена режима отображения сайта на экране и так далее.
С появлением новой директивы в языке CSS 2.0 «@font-face» мастерам интернет дизайна стали доступны широкие возможности по использованию всевозможных шрифтов для оформления сайта, это конечно слегка утяжеляет страницу для конечного пользователя, но даёт большую свободу в полёте фантазии при вёрстке.
Так появились шрифты-иконки или наборы пиктограмм в виде шрифта, которые можно использовать как в графических редакторах на стационарных ПК, так и онлайн на страницах сайта.
Как уже говорилось ранее, наиболее распространённым применением пиктограмм является создание качественных и красивых визуальных интерфейсов.
Какие преимущества у шрифтов-иконок перед изображениями?
В первую очередь — это возможность легкого построения Responsive дизайна, который будет откликаться на размеры экрана. При использовании иконок Вам потребуется минимум 3 полных сета, например для отображения сайта на телефоне, ПК и планшете. С пиктограммами достаточно указать предельные величины для шрифта. Ниже Вы видите три пиктограммы — это буквы ABC (.modern {font: 60px/68px ‘ModernPictogramsNormal’, Arial;})
ABC
При изменении размеров качество иконок не страдает, Вы можете использовать такой размер, какой Вам нужен (45px, например):
AB
Чтобы сменить цвет иконки, Вы можете просто задать цвет шрифта (color:red, например):
AE
С помощью CSS 3.0 можно легко применить различные эффекты к таким шрифтам-иконкам также, не теряя в качестве:
Размер текущего набора шрифта-иконок около 30 кб, чтобы сделать такое же с помощью изображений Вы используете в разы больше места на диске и, как следствие, утяжелите страницу сайта.
Это лишь часть преимуществ таких шрифтов. Начав их использовать, Вы сможете найти ещё массу применений для них.
Как использовать произвольный шрифт на страницах сайта?
В примерах выше мы использовали бесплатный шрифт с пиктограммами под названием Modern Pictograms. Данный шрифт подключён только к этому посту с помощью CSS (как это сделать на WordPress пишет Voffa.ru).
1. Вам понадобиться — @font-face-kit шрифта Modern Pictograms
2. Код CSS для страницы сайта:
<style type="text/css" media="screen">
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('modernpics-webfont.eot');
src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
url('modernpics-webfont.woff') format('woff'),
url('modernpics-webfont.ttf') format('truetype'),
url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
font-weight: normal;
font-style: normal;
}
h3.modern {font: 60px/68px 'ModernPictogramsNormal', Arial, sans-serif;letter-spacing: 0;}
.modern {font:18/27px 'ModernPictogramsNormal', Arial, sans-serif;letter-spacing: 0;}
</style>
Данный код подразумевает, что страница сайта и шрифты находятся в одной папке на сервере. Таким же образом можно подключать любые шрифты.
3. Теперь на странице можно использовать блоки с классом modern и латинскими буквами в них, которые будут отображаться как иконки. Обратите внимание, что слова составленные из иконок будут хорошо воспринимать поисковики, но не люди, что может нехорошо сказаться на ранжировании страницы.
Несколько бесплатных чёрных сетов шрифтов-иконок
Modern Pictograms (89 пиктограмм)
Разработан компанией Design Office для WordPress темы. Поставляется бесплатно по открытой лицензии.
Heydings icons (60 пиктограмм)
Отлично подойдёт для построения качественного GUI (graphical user interface).
Iconic icons (171 пиктограмма)
Большая упаковка иконок и шрифтов-пиктограмм. Идеальное решение для минималистичного дизайна.
Websymbols (80 пиктограмм)
Интернет обозначения в шрифте Websymbols, российской студии Just Be Nice.
Font-Awesome (150 пиктограмм)
Большой набор иконок, который можно использовать в коммерческих целях.
Также мы уже писали о новом шрифте с пиктограммами Entypo. На этой ноте у нас всё. Пользуйтесь, спрашивайте. Хорошего дня!
А нам {