Cufón – используйте шрифты, какие душа пожелает

Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.

Что за куфон?

Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для sIFR, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании. Для достижения сего были поставлены такие цели:

1. Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются JavaScript, SVG и <canvas> для нормальных, VML для IE)
2. Совместимость – должен работать в всех распространенных браузерах.
3. Простота использования – минимум приготовлений и конфигурации.
4. Скорость – она должна быть достаточно большой, даже для объемных текстов.

Как работает

Cufón состоит из двух независимых частей – генератора шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат, который будет использоваться далее. Вторая часть – движок рендеринга на JavaScript.

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

Попробуем

Попробуем все это на деле. Для начала возьмем файл со шрифтом, у меня есть для примера шрифт Rokwell, в обычном и жирном начертании. Идем по адресу cufon.shoqolate.com/generate и пихаем в форму имеющиеся у нас файлы. Далее, по желанию, отмечаем некие дополнительные настройки и получаем файл, в моем случае это был Rockwell_400-Rockwell_700.font.js Название нам показывается, что файл содержит наш шрифт в двух начертаниях, наглядно, но как-то долго такое в тег скрипт прописывать…

Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. cufon.shoqolate.com/js/cufon-yui.js

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

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

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

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

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

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

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

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

Это должно избавить IE от некоторой задержки в прорисовке шрифтов.

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

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).

И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще в CP1251 – ваши проблемы.
UPD: пользователь pgg демонстрирует, что CP1251 — поддерживается!

Тонкости

Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:

Cufon.replace("ul.menu li.active a", {color:'#000000'});

Это может понадобится например в следующем случае:
Cufon.replace("ul.menu li a");
Cufon.replace("ul.menu li.active a", {color:'#000000'});

При вызове первого рендерера, Cufón правильно определит цвет для всех ссылок в меню, согласно правилам CSS, однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера.

Подобным образом можно прописывать не только цвет, а и практически все свойства CSS, относящиеся к тексту. Кроме того, есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства, где это хорошо описано. wiki.github.com/sorccu/cufon/styling

Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:

Cufon.replace("h1.alala");

Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.

Пример

Было:

Стало:

Ссылки

Страница проекта на github
Документация по части визуального офрмления при помощи CSS
Генератор шрифтового файла

Оригинал статьи на блоге Yed-Prior