Показване на всякакъв шрифт | 1-ви начин - Cufon YUI
28-06-2011
Здравейте! За да може в уеб сайта си да използвате шрифт по ваше желание, трябва да използваме JavaScript или по-точно да регистрираме желания шрифт в Cufon YUI.

Как протича регистрацията:
Изваждаме въпросният шрифт от системата (OS). В Windows XP, шрифтовете се намират в Start -> Control Panel -> Fonts. Оттам го копираме и поставяме в някоя папка или да речем на десктопа.

*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!

Влизаме в сайта на Cufon YUI. Посочваме (избираме) шрифта от първия бутон (Regular Typeface).

От другите бутони нищо не посочваме (те са за удебелен, наклонен или удебелен и наклонен стил на шрифта). Слагаме тикчето на 'The EULAs of these fonts allow Web Embedding (without Adobe Flash)'.

След това поставяме тикче на 'All'. Другите ги оставяме, все пак препоръчително е да се избере всички глифове да се включат.

Отиваме най-отдолу на сайта и слагаме тикче на 'I acknowledge and accept these terms'.

Натискаме големият син бутон 'Let's do this!'. След като го натиснем, трябва автоматично да се изтегли регистрираният шрифт във файл с разширение *.js.

________________________________________________________________________________
Това беше регистрирането на шрифта. Сега трябва да го включим в сайта.


В <head> тага на сайта си поставяме следният код:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="съответното име на шрифта.js"></script>
. Като това е скрипта cufon.js (копираме цялото съдържание и правим нов текстов документ, поставяме го и променяме разширението на *.js, като горе посочваме правилният път до него), а името на шрифта го оставяме същото, което ни е оставено от сайта, от който го изтеглихме по-рано.

В <head> тага на сайта си добавяме и следният код:

<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4')('h5');
</script>
. Това указва, кой текст да се изобразява с регистрирания шрифт. Както можете да видите, този код заменя h1, h2, h3, h4 и h5 с шрифта, който желаем. Всеки текст между тези тагове, ще се изобразява с желания шрифт.

Кодът ни придобива следният вид:

<html>
<head>
<title>JavaScript шрифт</title>
<script type="text/javascript" src="cufon.js"></script> <!-- пътят до скрипта -->
<script type="text/javascript" src="съответното име на шрифта.js"></script> <!-- пътят до шрифта, със съответното име -->
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4')('h5'); <!-- между кои тагове, текстът ще се визуализира с желаният от нас шрифт-->
</script>
</head>

<body>
<h1>Текст със специфичен шрифт</h1>
<h2>Текст със специфичен шрифт</h2>
<h3>Текст със специфичен шрифт</h3>
<h4>Текст със специфичен шрифт</h4>
<h5>Текст със специфичен шрифт</h5>
</body>
</html>


Демо е горният код, просто го копирайте и тествайте (не забравяйте шрифта и скрипта)!
*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!

2-ри вариант - @font-face
Вторият вариант е по-добър (@font-face).


Урокът е авторски.
Източник: www.vladchooo.com








/ Трябва да сте регистриран за да напишете коментар /
От: rain
14:06 05-10-2011
Шрифтът не се визуализира, когато html документът се запише с Encoding тип Unicode. За страници със съдържание на български е по-добре да се използва UTF-8
От: Vladkata
17:42 05-10-2011
По-добре използвайте @фонт-face. Можете да намерите урок в профила ми.
1