Как использовать нестандартный шрифт?

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

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


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

Что за куфон?

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

  1. Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются , 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.

&lt;="text/javascript" src="./js/cufon-yui.js"&gt;&lt;/script&gt;
&lt;="text/javascript" src="./js/Rockwell_400-Rockwell_700.font.js"&gt;&lt;/script&gt;

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

&lt;script type="text/javascript"&gt;
    Cufon.replace("h1");
&lt;/script&gt;

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

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

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

<code>&lt;script type="text/javascript"&gt; Cufon.now(); &lt;/script&gt;</code>


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

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

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


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

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

Тонкости

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

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


Это может понадобится например в следующем случае:
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

Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:
<pre class="wp-code-highlight prettyprint linenums:1">Cufon.replace("h1.alala");</pre>
Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.

Запись навигация

Top