Cufon нестандартные шрифты на сайт

Верстая шаблоны HTML довольно часто сталкиваюсь с нестандартными шрифтами, которые дизайнер использует в PSD макете, и хорошо если в некоторых случаях можно принебречь этим "рюшикам" с минимальной потерей, но такой вариант не всегда проходит, и тут приходится принебречь уже своим убеждениям - что все должно быть максимально просто!

Ну что поделаешь как говорится "красота требует жертв", благо что с появлением Cufon, эти жертвы приносить стало давольно просто и удобно! В этой статье я приведу практический пример по использованию нестандартного шрифта на примере шрифта Trebuchet MS italic, которым будет отображен заголовок <h1>.

И так если шрифт мы определили и имеется файл trebucit.ttf, (если у вас Windows и данный шрифт установлен в системе, вы можете взять его так: Пуск=>Панель управления=>Оформление и темы=>Шрифты=>Выделить нужный шрифт, скопировать Ctrl+C и положить в нужную папку.), теперь нужно загрузить этот файл-шрифта в форму по этому адресу http://cufon.shoqolate.com/generate/ в поле Italic typeface (optional) (так как в данном случае у нас не жирный шрифт italic).

Поставить галки:

• The EULAs of these fonts allow Web Embedding (without Adobe Flash)
• All
• Cyrillic Alphabet (если текст на русском)
• Russian Alphabet (если текст на русском
• I acknowledge and accept these terms

Нажать кнопку Let`s do this!, и сохранить сгенерированный Javascript шрифта Trebuchet_MS_italic_700.font.js в нужную папку (где у вас хранятся javascript файлы). Полученный javascript файл содержит параметры отображения скрипта, можете открыть его в редакторе и просмотреть, если интересно ;)

Далее следует скачать сам дистрибутив Cufon, по этой ссылке cufon.shoqolate.com/js/cufon-yui.js, и сохранить его в нужной папке (например там же где и Trebuchet_MS_italic_700.font.js).

Затем неоходимо подключить подгрузку этих двух javascript в HTML документ, следующим образом:

 
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_italic_700.font.js"></script>
 

Теперь неоходимо инициализировать функцию класса Cufon - replace(), передав ей в качестве входных параметров объект - текстовый элемент, который нужно отображать данным шрифтом, а также указать имя шрифта , выгдядит это так:

 
<script type="text/javascript">
function Start(){
  Cufon.replace(document.getElementsByTagName('h1'), {fontFamily: 'Trebuchet MS'});
}
window.onload=Start;
</script>
 

Посмотреть пример: Cufon без javascript Framework

Скачать пример: Скачать пример Cufon без javascript Framework

Этот пример вызова на тот случай если вы не используете javascript Framework, таких как mootools, jquery, Prototype, Dojo, ниже будет приведен пример инициализации для самых распространенных: mootools и jquery.

Рекомендую использовать вызов Cufon.replace во внешне подгружаемом javascript файле (например cufon-replace.js, для этого создайте его и пропишите в нем вышеприведденый вызов, а также добавьте подгрузку cufon-replace.js в ваш HTML документ:

 
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_italic_700.font.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
 

Пример инициализации для mootools 1.2.4

 
<script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_italic_700.font.js"></script>
<script type="text/javascript">
//Этот код в файле cufon-replace.js
window.addEvent('domready', function(){  
  Cufon.replace($$('h1'), {fontFamily: 'Trebuchet MS'});
});
</script>
 

Посмотреть пример: Cufon с Mootools

Скачать пример: Скачать пример Cufon с Mootools

Пример инициализации для jquery 1.4.4

 
<script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Trebuchet_MS_italic_700.font.js"></script>
<script type="text/javascript">
//Этот код в файле cufon-replace.js
$(document).ready(function(){  
  Cufon.replace($('h1'), {fontFamily: 'Trebuchet MS'});
});
</script>
 

Посмотреть пример: Cufon с jQuery

Скачать пример: Скачать пример Cufon с jQuery

По советам других авторов, рекомендуется для IE вставлять следующий код, сразу перед </body>, либо перед вызовом любого внешнего скрипта, например Google Analytics:

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

Это должно ускорить прорисовку шрифта.

PS. И не забудьте подписатся на ленту новостей Подписка на RSS

В Мой МирПрактический пример использования Cufon для отображения нестандартных шрифтов в HTML документе, с использованием mootools, jquery и без нихСкопировать в блог

<p><a href="http://www.cleverscript.ru/javascript/13-scripts/37-cufon.html"><img style="margin-right:15px;" align="left" alt="" src="http://www.cleverscript.ru/images/stories/cufon.gif"/></a><a title='Cufon нестандартные шрифты на сайт' style='font-size:18px;font-weight:bold;' href='http://www.cleverscript.ru/javascript/13-scripts/37-cufon.html'>Cufon нестандартные шрифты на сайт</a><br/>Верстая шаблоны HTML довольно часто сталкиваюсь с нестандартными шрифтами, которые дизайнер использует в PSD макете, и хорошо если в некоторых случаях можно принебречь этим "рюшикам" с минимальной потерей, но такой вариант не всегда проходит, и тут приходится принебречь уже своим убеждениям - что все должно быть максимально просто!</p>