Cufon Font Replacement

Как да интегрирате желания от вас нестандартен шрифт на определени места във вашата уеб страница?

Съществуват няколко начина, с които може да постигнете това:

  • С помощта на графичен редактор превръщате текста в картинка и я добавяте в страницата.
  • С помощта на Flash изработвате .swf файл с нужния текст и го поставяте на определеното място.
  • С помощта на JavaScript и Cufón Font Replacement.

В тази статия ще Ви покажа, как да използвате Cufón Font Replacement, за да вмъкнете желания от вас шрифт на определено място в сайта си. Но нека първо да спомена за това, какви са предимствата на Cufón и какъв ще бъде всъщност крайния ефект от използването му. На първо място е това, че може да използвате всеки харесван от вас шрифт и да го визуализирате в сайта си, така той ще бъде видим за всички потребители в уеб пространството или по – точно за тези, които не са изключили опцията за поддръжка на JavaScript в браузера си. Ако все пак са го направили въпросния текст ще се изобразява със шрифта, който сте посочили по подразбиране във файла за стил. Както знаем увеличените шрифтове в уеб страниците излизат „назъбени“, другото предимство на Cufón е, че изглажда самия шрифт и го прави доста по – красив и привлекателен. С помощта на Cufón може да приложите и различни ефекти към шрифта, като gradient, textShadow и т.н.

Как да използвате  Cufón Font Replacement:

  1. Кликнете тук и генерирайте .js файл с харесвания от вас шрифт, например Arial_bold и запишете получения файл като Arial_bold_700.font.js
  2. Направете си нов .js файл, например cufon_effects.js и впишете в него следния код:

jQuery(document).ready(function() {

Cufon.replace(‘.boxtitle h2,.title h2‘, { fontFamily: ‘Arial_bold’ });
Cufon.replace(‘.boxtitle h2‘, { color: ‘-linear-gradient(#555, #ccc)’, textShadow: ‘1px 1px #000’ });
Cufon.replace(‘.mytext h2‘, { textShadow: ‘1px 1px 1px rgba(0, 0, 0, 0.6)’ });

});

,където в червен цвят са маркирани класовете на онези текстове от вашия сайт, които бихте желали да се визуализират под Cufon. Както виждате съм приложил и два ефекта за пример. Ако не използвате ефект за цвят, шрифтът ще се изобразява с цвета, който сте посочили в CSS файла за стил.

3.  Изтеглете и този файл cufon.js

4.  Сега остава само да импортнете трите .js файла във вашата уеб страница и сте готови.

Съветвам Ви да прилагате Cufon за по голям размер на шрифта, така ефектът ще бъде най – добър. При по – малък размер на шрифта се получава леко замазване, което на мен лично не ми допада.

Cufon Font Replacement

Надявам се, че тази статия е била полезна за Вас.

.title h2

Етикети на публикацията: , , , , , , , , , ,

Подобни публикации: Класиране на сайт в Гугъл по ключова дума, На кое място реално се класира сайта ни в Google, Избор на име на домейн – SavovDesign, Защо ми е необходим уеб сайт?,
16 април 2011
Cufon Font Replacement
1 / 5.00 / 95%

1 коментар до момента

  1. Здравейте! Имам проблем със така наречения cufon в header на сайта ни(училищен е)- искам просто шрифта да е по-малък, защото така е много грозно.Познанията ми по Web дизайн и java явно не са достатъчни за да го отстраня. Ще ви бъда благодарна ако ми съдействате! 🙁