[ Статья ] Cufon: экзотические шрифты просто и быстро.

Небольшое вступление.

По своей молодости в плане оформления веб-сайтов я очень любил экзотические шрифты. Любил их как и любой школьник - до умопомрачения. Однако, не зная ничего из css, js, а используя только графические редакторы - я захламлял все пространство сайта картинками с "краисвыми", как мне казалось, шрифтами.
Уверен многие из вас страдали похожей болезнью.
Потом я, конечно, ушел от этого. Стал использовать стандартные шрифты, в основном Tahoma и Verdana. Но настал момент, когда экзотические шрифты нужно было внедрить просто позарез.
Тогда появился он.... куфон!

Cufon

Если судить по вносимым изменениям на гитхабе, проекту cufon около 3-4 лет. Авторы позицианируют его как достойная альтернатива sIFR (другой популярный метод оформления текста) по причине того, что последний до сих пор остается слишком сложным в настройке и использовании.

Среди сильных сторон своего проекта создатели отмечают 4 наиболее важных пункта:

1. Нет необходимости в установке дополнительных плагинов. Он использует инструменты уже заложенные в браузер юзера.
2. Кроссбраузерность - с куфоном отлично работают все ведущие браузеры на нынешнем рынке.
3. Простота в использовании - настройка и мудренность использования сведены к минимуму.
4. Скорость - она должна быть высокой. Даже при работе с большим объемом текста.

Как работает

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

Чтобы вы понимали о чем вообще идет речь - можете перейти по ссылке http://casebazar.ru/ и посмотреть как там реализованы заголовки. Это именно cufon.

Нравится? И в этом нет ничего сложного.

Инструкция по использованию

1. Возьмем самый прекрасный шрифт на свете (так некстати проигнорированный всеми операционными системами). Я к примеру возьму GeoSlb712Bold.
2. Переходите в официальный генератор шрифта http://cufon.shoqolate.com/generate/
3. Добавляете все виды шрифта, что вам понадобятся в работе (regular, italic, bold etc)
4. Выбираем дополнительные параметры
5. Let's do this!

На выходе мы получаем два java скрипта (мой пример):

Код:

<script type="text/javascript" src="/js/cufon.js"></script>
<script type="text/javascript" src="/js/GeoSlb712BoldC_BT_700.font.js"></script>

Прописываем их в шапку сайта и добавляем еще один последний javascript элемент:

Код:

<script type="text/javascript">
	Cufon.replace('h1'); // Works without a selector engine
	Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
</script>

Как вы поняли, во втором случае мы указываем на какие классы, элементы будет воздействовать наш куфон. В данном примере все заголовки Н1 будут исполнены экзотическим шрифтом (в точности как на сайте кейсбазар.ру (ссылка была выше)).

Взаимодействие с поисковыми системами

Не пугайтесь, когда в увидите в фаербаге или в инспекторе Chrome страшный и неповторимый ужас на месте вашего H1. На самом деле, если вы посмотрите код страницы, то заметите, что H1 прописан красиво в 1 строчку, все как надо.
Вердикт: Отрицательного действия на поисковики не оказывает.

Наслаждаемся

Официальный сайт: shoqolate.com

demikk, а символьный шрифт? Допустим математические символы или wingdings эта штука умеет обрабатывать?

Umka, заинтересовал ваш вопрос (до этого не испытывал куфон в таком формате). Протестировал сегодня три шрифта:
1. Wingdings - работает
2. Шрифт-Штрихкод - работает
3. Иероглифы - не пошло. Но возможно я не так их настроил.

Под катом скриншот того, как айфон понимает куфон.

Попробую на формулах его. Хотя наверное квадратные корни или интегралы не выйдет набирать и все равно придется картинкой делать.

Вот мне очень интересно узнать результат...

Umka, Бермуд,

По поводу формул. Я немного погуглил и нашел сайт, где показана реализация необходимого для сервиса.
Называется данная штука jqMath.

Источник: http://mathscribe.com
Надеюсь поможет!

P.S. А сама Wikipedia используют технологию TeX, которая превращает вашу формулы в изображение.