Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.
Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для sIFR, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании. Для достижения сего были поставлены такие цели:
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.
Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом. Для примера все заголовки H1, нет проблем:
Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил CSS. Если они конечно заданы.
Если мы хотим заменять не только H1, но и какие нибудь «ul.menu>li.active>a», то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. Дело в том, что сейчас мало кто обходится без таких JavaScript библиотек, как Prototype, jQuery, MooTools или Dojo, а потому создатели решили не делать свою библиотечку избыточной и предлагают нам воспользоваться сторонней. Правильно предлагают! Итак, при использовании одной из вышеприведенных библиотек, нам просто надо подключать их в документе раньше чем Cufón, тогда он сам разберется что к чему и можно начинать использовать более сложные запросы.
Особая заметка для людей, которые пекутся о пользователях IE. Разработчики рекомендуют вставлять следующий код, сразу перед </body>, либо перед вызовом любого внешнего скрипта, например Google Analytics:
Это должно избавить IE от некоторой задержки в прорисовке шрифтов.
Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).
И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще в CP1251 – ваши проблемы.
UPD: пользователь pgg демонстрирует, что CP1251 — поддерживается!
Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:
Это может понадобится например в следующем случае:
При вызове первого рендерера, Cufón правильно определит цвет для всех ссылок в меню, согласно правилам CSS, однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера.
Подобным образом можно прописывать не только цвет, а и практически все свойства CSS, относящиеся к тексту. Кроме того, есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства, где это хорошо описано. wiki.github.com/sorccu/cufon/styling
Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:
Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.
Было:
![cb](http://blog.yed-prior.com/wp-content/uploads/2009/05/cb.png)
Стало:
![ca](http://blog.yed-prior.com/wp-content/uploads/2009/05/ca.png)
Страница проекта на github
Документация по части визуального офрмления при помощи CSS
Генератор шрифтового файла
Оригинал статьи на блоге Yed-Prior
- Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
- Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
- W3C-метод – используем
@font-family
и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера. - sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
- Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.
Что за куфон?
Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для sIFR, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании. Для достижения сего были поставлены такие цели:
- Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются JavaScript, SVG и <canvas> для нормальных, VML для IE)
- Совместимость – должен работать в всех распространенных браузерах.
- Простота использования – минимум приготовлений и конфигурации.
- Скорость – она должна быть достаточно большой, даже для объемных текстов.
Как работает
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, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.
Пример
Было:
![cb](http://blog.yed-prior.com/wp-content/uploads/2009/05/cb.png)
Стало:
![ca](http://blog.yed-prior.com/wp-content/uploads/2009/05/ca.png)
Ссылки
Страница проекта на github
Документация по части визуального офрмления при помощи CSS
Генератор шрифтового файла
Оригинал статьи на блоге Yed-Prior