Добавляем уникальный шрифт на сайт Опции

[rAmantiK]

Здравствуйте. Сегодня речь пойдет о нестандартных шрифтах на сайтах. Наверняка вы не раз сталкивались с этой задачей, но не знали как её реализовать.
Это можно сделать несколькими способами:
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.

КОД

<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.

КОД

<script type="text/javascript">  
   Cufon.replace("h1");  
   </script>

Если нужно выделить какой-то определенный класс, то пишем так:

КОД

<script type="text/javascript">  
   Cufon.replace('.nameo,#idname');  
   </script>