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 в 00:00.
Метки: css, cufon, font, html

IT.notes

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

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

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

Страницы

Метки

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

It анекдот