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

Суббота, 22 Январь 2011

 

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

 

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

 

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

 

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

 

 

Нажать кнопку 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

 

Метки:

Комментарии 

 
anonim Суббота, 22 Январь 2011

Не пойму, зачем нужен cufon, когда есть font-face?

 

 
 
anonim Суббота, 22 Январь 2011

Потому что при font-face вот такие минусы:

- Используемый шрифт загружается на компьютер пользователя
-- Проблемы с распространение м платных лицензированных шрифтов
-- Пока шрифт не загрузится на компьютер пользователя(а вес может доходить до пары Мегабайт), будет использоваться стандартный шрифт "по-умолчанию"
- Отбрасываем из поддержки пользователей с более старыми версиями браузеров
- Большой вес шрифта
- 2 файла шрифта для разных браузеров, формата EOT и TTF

 

 
 
anonim Суббота, 12 Февраль 2011

Свежая статейка - это гуд. Сейчас испробую cufon по твоему мануалу, автор, ато кроме шрифта Arial у меня больше никакие шрифты не работают.

 

 
 
anonim Суббота, 12 Февраль 2011

Нифига шрифты не меняются. Писец какой-то.настройи уже 4 раза проверял

 

 
 
anonim Вторник, 15 Февраль 2011

Пришлите код на support@clevers cript.ru я посмотрю в чем ошибка, так ведь сказать трудно. В Firebug проверяли? Ошибок JavaScript нет?
Какой javascript фреймверк используете в проекте?

 

 
 
anonim Четверг, 05 Май 2011

Спасибо большое!
Лучшая статья на эту тему.
Использую шаблон, где cufon уже встроен. Беда в том, что не отображает заголовки на кириллице. Преобразовал файл со шрифтом с учетом с учетом кириллицы и русского алфавита. Заменил существующий файл на новый - без изменений, русский заголовок не отображает.
Подскажите, в чем возможна проблема.

 

 
 
anonim Суббота, 07 Май 2011

В Firebug проверяли нет ошибки?
И если вы сгенерировали новый js со шрифтом то в инициализации CUFON вы должны передать новое название шрифта:

//Этот код в файле cufon-replace.js
Cufon.replace($$('h1'), {fontFamily: 'Имя шрифта'});

Имя шрифта посмотрите в сгенерированном файле, также в подключаемом js должно быть новое название файла который вы сгенерировали

 

 
 
anonim Среда, 11 Май 2011

Ivan
Такое возможно если использовать изначально шрифт, который не поддерживает русский язык.

 

 
 
anonim Пятница, 13 Май 2011

Да это тоже может быть причиной, следует изначально проверять этот момент.

 

 
 
anonim Воскресенье, 22 Май 2011

Finally, an issue that I am passionate about. I have looked for information of this caliber for the last several hours. Your site is greatly appreciated.

 

 
 
anonim Четверг, 09 Июнь 2011

Подскажите пожалуйста. Мучаюсь три дня ни как не получается поменять шрифт вот код:

" lang="" dir="" >


/css/constant.css" type="text/css" />
/media/system/js/mootools.js">
/scripts/ie_png.js">

ie_png.fix('.png');






Хочу вставить вот этот шрифт: AGBenguiat_Cyr-Bold_400.font.js

 

 
 
anonim Четверг, 09 Июнь 2011

ни как не могу поменять шрифт!! Три дня мучаюсь!

 

 
 
anonim Пятница, 10 Июнь 2011

Сначала все хорошо установилось, нестандартные шрифты стояли. пару дней. потом все пропало. куда - неизвестно. посоветуйте что это может быть и как вернуть.

 

 
 
anonim Понедельник, 20 Июнь 2011

Ну откуда же я могу знать куда у вас все пропало...

 

 
 
anonim Вторник, 21 Июнь 2011

Спасибо за статью, попробовала, все работает отлично,
кроме того, что к тексту перестал применяться text-shadow))

 

 
 
anonim Воскресенье, 21 Август 2011

Помогите плз... Уже неделю бьюсь проблемы в том что из за cufon расползается структура сайта, пробывал поразному уже.. в основном он как бы прячет или убирает border у блоков.. вот сайт buroea ru xsph ru сейчас проблема осталась в ie 7 и 6 на длинных страницах

 

 
 
anonim Воскресенье, 11 Сентябрь 2011

Здравствуйте! Не могли бы Вы помочь, не знаю, к кому еще можно обратиться?
Редактирование веб-страниц знаю на троечку, никак не могу понять, почему на шаблоне сайта (прикрепленный файл) при изменении кода в блоке HEAD ничего хорошего не получается: либо все слова исчезают, либо отображаются стандартным Calibri. Мне нужно поменять шрифт - я добавляю в папку js новый файл javascript шрифта и вписываю в HEAD его адрес заместо какого-нибудь другого, но безрезультатно: либо ничего, либо Calibri.
Подскажите, пожалуйста, по возможности, что мне можно сделать, чтобы поменять шрифт на этом сайте без последствий.
Заране спасибо!
С ув., Виталий

 

 
 
anonim Воскресенье, 11 Сентябрь 2011

Открыл ваш сайт в firebug > index.html, в нем вы подключаете 2 шрифта js/Josefin_Sans_60 0.font.js и js/Lobster_400.font.js после js/cufon-replace.js, а должно быть наоборот!

В самом cufon-replace.js :


Cufon.replace('nav a', { fontFamily: 'Josefin Sans' ,textShadow:'1px 1px #fff', hover:{}});
Cufon.replace('h1 a', { fontFamily: 'Lobster' , color:'-linear-gradient(#414141,#2d2d2d)',textShadow:'-1px -1px #000'});
Cufon.replace('h2', { fontFamily: 'Lobster' });
Cufon.replace('.header-more', { fontFamily: 'Lobster',textShadow:'1px 1px #000' ,hover:{color:'#74be00'} });
Cufon.replace('.jp-audio .jp-title', { fontFamily: 'Josefin Sans' });
Cufon.replace('.jp-audio h2', { fontFamily: 'Lobster', textShadow:'2px 2px rgba(0,0,0,.1)' });


Попробуйте без параметров как здесь : Cufon.replace('h2', { fontFamily: 'Lobster' });

Ну а так ошибок в firebug JS нет, шрифт выводится не Calibri, скорее всего причина в последовательно сти подключения шрифтов и cufon-replace.js, о которой я упоминал выше.

 

 
 
anonim Четверг, 15 Сентябрь 2011

А у меня вообще текст пропадает, в чем может быть проблема?

 

 
 
anonim Понедельник, 10 Октябрь 2011

добрый день! В куфоне, походу - не работает выравнивание текста по ширине страницы??

 

 
 
anonim Вторник, 11 Октябрь 2011

Да действительно не работает свойство CSS text-align: justify; - может быть для других шрифтов и работает...

 

 
 
anonim Понедельник, 07 Ноябрь 2011

подскажите как включть куфон только в IE

 

 
 
anonim Четверг, 10 Ноябрь 2011

Используйте для этого условные комментарии для IE

 

 
 
anonim Воскресенье, 25 Март 2012

абзац, чтоб внедрить шрифт такие шаманства О_о

 

 
 
anonim Вторник, 15 Январь 2013

Во всех браузерах все ок, в IE почему то Cufon не переключается на второй шрифт, что делаю не так?




Cufon.replace('h1', { fontFamily: 'Cambria' });
Cufon.replace('text1', { fontFamily: 'Univers_Condens ed_Medium' });

ТестТест
Второй шрифт остается обычным только в IE
Cufon.now();

 

 
 
anonim Четверг, 07 Март 2013

Спасибо автор !!! У меня правда был англ. шаблон со шрифтом DIN 1451 Std (DINEngschriftS td). Сделал на jQuery -- все работает.
От себя замечу что:
1) Во время этой процедуры не забыть удалить тот редкий шрифт из папки со шрифтами
2) Работает во всех популярных браузерах (даже в IE6)
3) С оключенным javaScript не работает (естественно), поэтому все-таки желательно прописывать в CSS хоть как-то похожие кроссбраузерные шрифты

 

 
 
anonim Четверг, 12 Июнь 2014

Вы видели какой потом получается код (у каждого слова назначается свой стиль).
Для продвижения это не очень хорошо, когда в заголовке h1 помимо текста еще куча всякой фигни в виде стилей...

 

 

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