Иконки для сайта на основе шрифтов
Я продолжаю активно совершенствовать свои знания в области CSS. Совсем недавно мне посчастливилось наткнуться на один интересный пост американского верстальщика. В нем он рассказывал о своей практике применения шрифтов, содержащих различные пиктограммки (читай спецсимволы), которые можно использовать вместо изображений (иконок). Звучит не совсем ясно, поэтому давай сразу попробуем разобраться на примерах.
Для начала давай представим, что у нас имеется некий шрифт, который вместо оформления букв и чисел содержит вот такой набор пиктограмм:
Таких web-шрифтов много, но для сегодняшнего примера я взял бесплатный Heydings Icons. Ты можешь скачать его из аттача к этой заметке. Каждая пиктограмма соответствует определенному символу. Например, иконка соответствующая типичному изображению кнопки для подписки на RSS подвязана на букву “R”. Гаечный ключ на букву “G”, а сердечко на “h” (регистр имеет значение!).
Если ты ни разу не применял подобную технику, то не торопись сразу подключать загруженный шрифт. Просто закинуть в папку со своей тестовой страницей и указать его имя в font-family не даст ничего хорошего. Для использования шрифта требуется проделать несколько простых шагов.
Первым делом нам необходимо подготовить шрифт для дальнейшего использования. Чтобы подключить произвольный шрифт к своей странице можно воспользоваться правилом @font-face. С его помощью ты можешь определить настройки шрифта, а также загрузить специфичный шрифт на компьютер пользователя.
На этом этапе возникает первая проблема. К сожалению, браузеры поддерживают шрифты определенных форматов. Например, все блохастые до 9-й версии могут похвастаться работой лишь с шрифтами формата EOT (Embedded Open Type). Другие браузеры могут корректно только работать либо со шрифтами в форматах SVG/woff/ttf. Таким образом, нам нужно заранее предусмотреть этот момент и подготовить наш шрифт во всех популярных форматах.
А как это сделать? Ведь у нас же только имеется шрифт в формате TTF? К счастью, для решения этой проблемы коллеги по цеху придумали удобный и простой инструмент - http://www.fontsquirrel.com/fontface/generator. Все, что от нас требуется - зайти на страницу сервиса и скормить ему наш шрифт в формате ttf. Взамен он нам выплюнет архив, содержащий наш же шрифт, но в разных форматах, а также css-файл, содержащий все необходимые инструкции для подключения шрифта к нашей странице. Нам останется только распаковать все и добавить парочку шрифтов.
Ok, с этим разобрались. Теперь попробуем составить страницу (все исходники доступны в конце заметки), демонстрирующую пример использования пиктограмм из шрифтов:
<!Doctype> <html> <head> <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> <style> #icon-from-font { font-size: 96px; } #icon-from-font:before, a#icon-from-font:after { font-family:'HeydingsCommonIconsRegular', sans-serif; } #icon-from-font:before { color:#c03f29; content:'R'; } #icon-from-font2 { font-size: 96px; } #icon-from-font2:before, a#icon-from-font2:after { font-family:'HeydingsCommonIconsRegular', sans-serif; } #icon-from-font2:before { color:#c03f29; content:'G'; } </style> </head> <body> <div id="icon-from-font"></div> <div id="icon-from-font2"></div> </body> </html>
В своей странице я решил продемонстрировать отображение двух иконок - одну для оформления подписки на rss, а вторую с изображением гаечного ключа. Результат представлен на рисунке ниже:
| Вложение | Размер |
|---|---|
| Icons from Font.zip | 55.46 КБ |
- Spider_NET's блог
- Войдите или зарегистрируйтесь, чтобы получить возможность отправлять комментарии
- 824 просмотра
Комментарии
4 комментария(ев)Дата: Втр, 21/02/2012 - 14:11
Польза данного шрифта очевидна: меньше иконок в графическом формате - быстрее загрузка страницы в браузере. Так сказать небольшая оптимизация
Дата: Втр, 21/02/2012 - 16:13
Но тут есть и обратная сторона медали. Шрифт то скачивается сразу полностью юзеру на комп при первом же посещении страницы. Если запихнуть в него слишком него иконок, то получим обратный эффект, т.к. большинство посетителей - гости, которые откроют всего 2-3 страницы.
Дата: СР, 22/02/2012 - 06:35
А на сколько такое решение кроссбраузерно? Как к нему IE относится?
Дата: СР, 22/02/2012 - 11:54
Тут главная фича в гибком управлении свойствами. Например, обычную иконку мы не можем оперативно перекрасить и изменить размер. В случае со шрифтами проблем нет.
2nstorm
Проблем в принципе нет. Кажется у IE < 8 имеется проблема с обработкой правила @font-face, но это легко решить при помощи того же Cufon'а. Так, что вполне кроссбраузерно.