Цитата дня :

Вдохновению не вредит страдание, но его убивают мелкие заботы.

( В. Крачковский )

| Доменное имя | Разное php | Тонкости web | Выбираем хостинг | Библиотека |
Нестандартный шрифт на сайт. Cufon

Нестандартный шрифт на сайт. Cufon.

Итак, если вдруг дизайнер подкинул вам такую задачу, как вставка нестандартного, красивого шрифта на сайт, то в этой шпаргалке я вам покажу один из способов, как это можно сделать.
 

Можно нарезать картинок на все заголовки и т.п. куда нужно, но мы пойдем другим путем. Будем использовать такую вещь, как Cufon.

Сначала нужно найти сам файл со шрифтом. Пусть, например, это будет Neutra.ttf. Теперь нам нужно сгенерировать js, который определяет этот шрифт. Для этого идем на cufon.shoqolate.com/generate/, кидаем в поле «Regular typeface» шрифт, ставим галочки в «The EULAs of these fonts allow Web Embedding (without Adobe Flash)» и «I acknowledge and accept these terms», и жмем «Let’s do this!». На выходе получаем web_100.font.js. С этим js и будет работать Cufon.

Теперь скачиваем сам Cufon: cufon.shoqolate.com/js/cufon-yui.js

Подключаем эти 2 скрипта в документ.

1
2
3
4
5
6
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="web_100.font.js"></script>
 
<script type="text/javascript">
    Cufon.replace("h1");
</script>

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Нестандартный шрифт на сайт</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="web_100.font.js"></script>
<script type="text/javascript">
    Cufon.replace("h1");
    Cufon.replace(".web"); // С помощью jquery можно обращаться и по классам
</script>
</head>
<body>
<p>Демонстрация применения нестнадартного шрифта.</p>
<h1>Hello, world!</h1>
<p>Привет! I'm <span class="web">wep-palette.ru</span>!</p>
</body>
</html>

Разработчики для пользователей ие рекомендуют вставлять сразу перед </body>, либо перед вызовом любого внешнего скрипта, например гугл аналитикс, следующую строку:

1
<script type="text/javascript"> Cufon.now(); </script>

Это должно снизить задержку перед подменой шрифта на сайте, что особо заметно, когда скрипту беспощадно отдают целые абзацы текста, что явно не рекомендуется






Дети наше будущее
Создание сайта для благотворительного фонда.

Новый год детям
Создание сайта. Участие в благотворительном фонде помощь детям.

Как получить управляемый сайт дешего





Наши клиенты:




Популярные:

Создание сайта визитки за 300 рублей...

Безопасные цвета для сайта

Веб дизайн, создание сайтов, шаблоны, фирменный стиль, предоставление хостинга 
info@web-palette.ru Студия веб дизайна Web-Palette.ru 2002-2015   (495)514-35-23
Rambler's Top100
Яндекс.Метрика