Изработка на уеб сайтове

Портфолио - SavovDesign

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

Етикети на публикацията: изработване на сайтове изработка на онлайн магазин направа на сайт правене на сайт сайт изработка създаване на сайт уеб дизайн

Cufon Font Replacement
1 / 5.00 / 95%

Още публикации от блога

HTML5 семантични елементи и значението им за SEO

HTML5 семантични елементи и значението им за SEO

Какво е HTML5 семантика? Нови семантични елементи в HTML5 за по-добра достъпност и тяхното значение за SEO.

Как да изберете подходяща оферта за изработване на вашия сайт?

Как да изберете подходяща оферта за изработване на вашия сайт?

Предварително изготвени оферти за изработване на уеб сайт от SavovDesign. Какво трябва да знаете, при избор на оферта.

Какво е SSL сертификат и HTTPS протокол и каква е ползата му за SEO?

Какво е SSL сертификат и HTTPS протокол и каква е ползата му за SEO?

SSL сертификат и HTTPS протокол на домейна за по-добра SEO оптимизация на вашия сайт. Какво е SSL сертификат и HTTPS протокол?

5 причини за разликите между SERP позициите на Google и тези в резултатите от търсене

5 причини за разликите между SERP позициите на Google и тези в резултатите

Защо позицията на вашия сайт в SERP на Google е различна от тази в резултатите от търсене?

10 стъпки за по-бързо зареждане на уеб сайт

10 стъпки за по-бързо зареждане на уеб сайт

Важна ли е скоростта на зареждане на вашия уеб сайт? 10 стъпки за по-бързо зареждане на уеб сайт.

Етапи при изработка на уеб сайт

Етапи при изработка на уеб сайт

Процедурата при изработване на уеб сайт включва няколко основни етапа и стъпки, които трябва да бъдат задължително спазени.

Какво е изработка на мобилна версия за сайт ?

Какво е изработка на мобилна версия за сайт ?

Мобилната версия на уеб сайт представлява олекотена, адаптирана и оптимизирана за мобилната среда, версия на сайта.

Какво е изработка на адаптивен дизайн за сайт ?

Какво е изработка на адаптивен дизайн за сайт ?

Изработката на адаптивен дизайн на сайт включва стилна, визуална и гъвкава подредба на елементи, подходяща за всички настолни или

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

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