• ... наберите в поиске Google: sqrt(cos(x))*cos(300x)+sqrt(abs(x))-0.7)*(4-x*x)^0.01, sqrt(6-x^2), -sqrt(6-x^2) from -4.5 to 4.5
  • ...не всякое оценочное суждение должно служить модификатором поведения
  • ... сила трения - это комиссия реальности за перемещение энергии
  • ... наверх к шапке сайта можно вернуться с помощью кнопки "home"
  • ... нужна красивая кнопка на CSS - используйте наш конструктор
  • ... на нашем сайте открылся новый сервис - добавление винтажных эффектов к фото
  • ... Интернет весит больше, чем 530 миллиардов гигабайт!
  • ... участники групп Вконтакте, Google+ и Facebook знают про лампу, которая горит более ста лет, присоединяйтесь - это бесплатно же
  • ... в Microsoft Word и других редакторах неделимый пробел ставится сочетанием "ctrl+shift+space"
  • ... нажав "ctrl+alt+print scr", ты сделаешь скриншот именно активного окна в windows
  • ... снять защиту с PDF файла нереально? можно!
  • ... мы открыли магазин часов с обратным ходом и на широком ремешке добро пожаловать
  • ... прокручивать сайт вниз можно кнопкой "пробел", а вверх - "shift+пробел"
  • ... что такое реверсивный поиск изображений?
  • ... про онлайн калькулятор, который чертит графики - читаем далее
  • ... секретные смайлики Facebook - троль и ко, подробнее
  • ... что будет, если в поиске Google набрать "do a barrel roll"
  • ... как определить английский шрифт по изображению? читаем
  • ... как легко качать видео с Youtube и Vimeo?читаем далее
  • ... не сидите за компьютером больше часа без отрыва, встаньте пройдитесь!
  • ... чтобы открыть ссылку в новой вкладке браузера, достаточно при нажатии удерживать Ctrl
  • ... в английской версии Vk - нет рекламы, просто переключите язык в настройках
  • ... чтение детерминирует вербальную аддитивность
  • ... мы сами не знаем куда ведёт эта ссылка - "Мне повезёт!"
  • ... мы открыли онлайн лавку с прикольными часами, посмотреть
  • ... как удалить свой аккаунт в социальных сетях? легко и просто
  • ... используешь почту Gmail? прочитай про фильтры
  • ... вызывать диспетчер задач Windows гораздо удобнее сочетанием Ctrl+Shift+Esc, не снимая руки с мыши :)
  • ... как быстро изменить размер нескольким фото читать
  • ... Вам бесплатно, нам приятно:
  • ... онлайн тетрисы, которых Вы ещё не видели тут
Follow:

Чёрные шрифты-иконки и способы их применения в дизайне сайта

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

С появлением  новой директивы в языке CSS 2.0 «@font-face» мастерам интернет дизайна стали доступны широкие возможности по использованию всевозможных шрифтов для оформления сайта, это конечно слегка утяжеляет страницу для конечного пользователя, но даёт большую свободу в полёте фантазии при вёрстке.

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

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

Какие преимущества у шрифтов-иконок перед изображениями?

В первую очередь — это возможность легкого построения Responsive дизайна, который будет откликаться на размеры экрана. При использовании иконок Вам потребуется минимум 3 полных сета, например для отображения сайта на телефоне, ПК и планшете. С пиктограммами достаточно указать предельные величины для шрифта. Ниже Вы видите три пиктограммы — это буквы ABC (.modern {font: 60px/68px ‘ModernPictogramsNormal’, Arial;})

ABC

При изменении размеров качество иконок не страдает, Вы можете использовать такой размер, какой Вам нужен (45px, например):

AB
Чтобы сменить цвет иконки, Вы можете просто задать цвет шрифта (color:red, например):

AE
С помощью CSS 3.0 можно легко применить различные эффекты к таким шрифтам-иконкам также, не теряя в качестве:

AE

Размер текущего набора шрифта-иконок около 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. На этой ноте у нас всё. Пользуйтесь, спрашивайте. Хорошего дня!

А нам {

Стань первым, кто откомментировал!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *