Cufon — нестандартный шрифт средствами JS

Нужно внедрить нестандартный шрифт на веб страницу?

Заметка

Нестандартный шрифт — это шрифт, который не будет установлен в ОС большинства посетителей сайта. Результат — пользователи не смогут увидеть, оценить и в полной мере восхититься фантазией дизайнера. Следствие — дизайнер не в восторге от твоей беспомощности. Следствие следствия — поиск способа сделать по макету.

Решение по старинке — картинками. Нарезали, к примеру, пункты меню, вставили на сайт и готово. Но у этого способа есть тьма недостатков. Самый неприятный из них — это отсутствие гибкости. Например, в том же меню, владелец сайта сам не сможет изменить/добавить пункт меню (если он конечно как минимум не знаком с photoshop, HTML и CSS).

По очевидным причинам, такой способ не даст возможности оформить красиво, к примеру, заголовки статей. Поэтому верстальщик вынужден искать более «сильное» решение. Одно из таких, которое достойно твоего внимания — javascript плагин Cufon.

Что делает

Позволяет внедрить любой шрифт на веб страницу без жесткой привязки к дизайну (т.е. тексты, заголовки, меню и т.п. можно будет изменять, не прибегая к услугам веб разработчиков).

Как делает

Обычный текст при загрузке страницы. заменяется на SVG объект (для браузеров, поддерживающий стандарты) или на VML (для IE) — графические области, в которых символы отрисовываются с помощью javascript.

Что качать

• cufon-yui.js — библиотека
• используем генератор «создания» шрифта для библиотеки. Сюда загружаем файл шрифта (.TTF, .OTF, .PFB), «настраиваем» его под свои нужны. На выходе получаем js-файл, который будет отвечать за отрисовку необходимого шрифта

Быстрый старт

Подключаем библиотеку и сгенерированный js-файл, указываем, к какому элементу(ам) применить данный шрифт

<script type="text/javascript" src="path-to/cufon-yui.js"></script>
<script type="text/javascript" src="path-to/[имя файла, который сделает cufon-генератор]"></script>
<script type="text/javascript">
Cufon.replace("h1");
</script>

Демо пример. Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10.5
• Safari 4

Преимущества

• достаточная кроссбраузерность
• минимум внешних файлов при любом количестве текста с нестандартным шрифтом
• просто внедрять
• владелец сайта спокойно может редактировать текст
• параметры шрифта (размер, жирность, цвет) легко изменить
• есть реакция на hover
• возможность добавление тени тексту (text-shadow. В IE правда тень будет не совсем такая как нужно)
• защита используемого шрифта от копирования
• возможность разложить шрифт на только нужные символы для уменьшения размера файла-шрифта
• не требует дополнительных библиотек
• небольшой вес скрипта

Недостатки

• наличие внешних файлов — хоть их и мало, все равно увеличат трафик, а значит страница будет открываться дольше
• нет возможности выделить и скопировать текст (над этим работают. в IE уже можно, хоть и выглядит страшновато)
• неприменимо к большим объемам текста
• пока не отработает скрипт, пользователь будет видеть текст шрифтом по умолчанию

Методы

Опции

Еще примеры

Подключение разных шрифтов на одной странице:

<script type="text/javascript" src="path-to/cufon-yui.js"></script>
<script type="text/javascript" src="path-to/name-font-1.js"></script>
<script type="text/javascript" src="path-to/name-font-2.js"></script>
<script type="text/javascript">
Cufon.set("fontFamily", "NameFont1");
Cufon.replace("#welcome");
Cufon.replace("h1");
Cufon.replace(".header #topMenu");

Cufon.set("fontFamily", "NameFont2");
Cufon.replace("h2");
</script>

Добавление градиента и тени заголовку. Для меню включаем hover:

Cufon.replace(";h1", {
	color: "-linear-gradient(white, black)",
	fontFamily: "Nice font",
	textShadow: "1px 1px rgba(0, 0, 0, 0.2)"
});
Cufon.replace("#nav a", {
	hover: true
});

Заметки

• хоть cufon и поддерживает тени, но не стоит ждать точной эмуляции text-shadow. Чтобы добиться схожести приходеться повозиться. В IE с тенями еще хуже.

Материалы

• Полная документация (можно оставлять donate — есть за что)
• Примеры на рабочих сайтах
• Список замеченных багов