Сегодня речь пойдет о нестандартных шрифтах на сайтах. Наверняка вы не раз сталкивались с этой задачей, но не знали как её реализовать.
Это можно сделать несколькими способами:
1. Картинками. Нарезать маленькие картинки, объединить их в одно большое изображение (спрайт) и вставлять эти картинки вместо текста. Но этот способ не совсем подходит и им не желательно пользоваться.
2. Метод от W3C. Простой метод без заморочек. Используется @font-family. Но у этого метода есть один недостаток: Многие браузера не совсем корректно поддерживают данный метод.
3. sIFR - на сегодняшний день это самый употребляемый способ. Но у него есть один недостаток - требует наличие flash-плагина.
4. Cufón - Отличный плагин, практически без недостатков. Об нем мы и будем сегодня говорить. Как работает Cufon?
Cufon состоит из двух частей. Это: Javascript плагин Cufon и соответственно сам шрифт, который мы хотим использовать.
Переходим к практике.
Для начала нужен сам шрифт, который мы хотим использовать. Я скачал бесплатный шрифт Taurus нормального начертания. Теперь, когда у нас есть шрифт идем по адресу cufon.shoqolate.com/generate/ и кидаем в форму имеющиеся шрифты. Ставим галочки в "The EULAs of these fonts allow Web Embedding (without Adobe Flash)" и "I acknowledge and accept these terms", и жмем "Let’s do this!". Если шрифт кириллический, тогда дополнительно ставим галочку "Cyrillic Alphabet".
Жмем "Let’s do this!". Получаем JavaScript файл с нашим шрифтом.
Далее скачивание сам дистрибутив Cufón - cufon.shoqolate.com/js/cufon-yui.js.
Теперь подключаем оба файла, как самый обычный Js.
Code
<script type="text/javascript" src="http://cufon.shoqolate.com/js/cufon-yui.js"></script>
<script type="text/javascript" src="./js/taurus_font.js"></script>
Теперь нам нужно выбрать те элементы, которые мы хотим нарисовать новым шрифтом.
Например все заголовки в h1.
Code
<script type="text/javascript">
Cufon.replace("h1");
</script>
Если нужно выделить какой-то определенный класс, то пишем так:
Code
<script type="text/javascript">
Cufon.replace('.nameo,#idname');
</script>
Ну вот и все. Все остальные настройки (цвет, размер, начертание шрифта) настраиваются с помощью CSS!
Пример:
Было:
Стало:
Администраторы
