Показване на всякакъв шрифт | 1-ви начин – Cufon YUI

Автор: Vladkata

Здравейте! За да може в уеб сайта си да използвате шрифт по ваше желание, трябва да използваме 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

One Reply to “Показване на всякакъв шрифт | 1-ви начин – Cufon YUI”

Вашият коментар