web-touristПоказване на всякакъв шрифт | 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>Демо е горният код, просто го копирайте и тествайте (не забравяйте шрифта и скрипта)!
*Използвайте по-семпли шрифтове (с не много украски), иначе няма да се визуализира шрифта!
Урокът е авторски.
