Cufon. Или как сделать красивый, нестандартный шрифт на сайте.

По сути решение является альтернативой для sIFR, который на самом деле сложнее в настройке и использовании.

На самом деле все очень просто.

Требуется два скрипта: Первый — сам Cufon.js (движок рендеринга на Javascript). Второй скрипт мы должны получить с помощью генератора, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат.

Приступим

На страничке http://cufon.shoqolate.com/generate/ заполняем форму.

Отмечаем некие дополнительные настройки и получаем файл,

Скачиваем сам Cufon http://cufon.shoqolate.com/js/cufon-yui.js

Подключаем оба этих файла в наш документ, как самый обычный Javascript.

<script type="text/javascript" src="./cufon-yui.js"></script>
<script type="text/javascript" src="./Your-font.font.js"></script>

Теперь выбираем, какие элементы страницы мы хотим прорисовать нашим красивым шрифтом. Для примера все заголовки H1, нет проблем:

<script type="text/javascript">
    Cufon.replace("h1");
</script>

Цвет, размер и другие параметры для прорисовки берутся из правил CSS.

Если мы хотим заменять не только H1, но и какие нибудь «ul.menu>li.active>a», то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. Дело в том, что сейчас мало кто обходится без таких Javascript библиотек, как Prototype, jQuery, MooTools или Dojo, а потому создатели решили не делать свою библиотечку избыточной и предлагают нам воспользоваться сторонней.

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

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

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

Использование нескольких шрифтов.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="font1.font.js" type="text/javascript"></script>
<script src="font2.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'font1' });
    Cufon.replace('h2', { fontFamily: 'font2' });
</script>

Все страницы, где используется Cufon – должны быть в кодировке UTF-8, либо обратно совместимые с ней.
Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:
```
Cufon.replace("ul.menu li.active a", {color:'#000000'});
```
Это может понадобится например в следующем случае:
```
Cufon.replace("ul.menu li a");
Cufon.replace("ul.menu li.active a", {color:'#000000'});
```
При вызове первого рендерера, Cufon правильно определит цвет для всех ссылок в меню, согласно правилам CSS, однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера. За тонкостями на сайт http://wiki.github.com/sorccu/cufon/styling Пример
```
<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="example.font.js"></script>
<script type="text/javascript">
    Cufon.replace("h1");
    Cufon.replace(".neutra"); // С помощью jquery можно обращаться и по классам
</script>
</head>
<body>
<p>Демонстрация применения нестнадартного шрифта.</p>
<h1>Hello, world!</h1>
<p class="example">Hello, world!</p>
</body>
</html>
```

Эта страница была опубликована 24.04.2016 в 12:14.
Метки: css, cufon, font, html

Реклама двигатель ...

Страницы

Последние записи

It анекдот

- Китайцы взломали сайт Пентагона методом подбора, каждый

попробовал один пароль.

IT.notes

Самые популярные статьи

Cufon. Или как сделать красивый, нестандартный шрифт на сайте.

Реклама двигатель ...

Страницы

Метки

Последние записи

It анекдот