Xiper

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

Автор: Евгений Рыжков Дата публикации:

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

Заметка

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

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

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

Что делает

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

Как делает

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

Что качать

  • — библиотека
  • используем генератор "создания" шрифта для библиотеки. Сюда загружаем файл шрифта (.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 уже можно, хоть и выглядит страшновато)
  • неприменимо к большим объемам текста
  • пока не отработает скрипт, пользователь будет видеть текст шрифтом по умолчанию

Методы

setзадает опции шрифтаCufon.set(option, value)Cufon.set("fontFamily", "Amaze")
replaceзаменяет обычный шрифт на указанныйCufon.replace(selector[, options])Cufon.replace('h1')('h2');
nowкоманда для начала замены текста Cufonом. Иногда нужно для IE, чтобы замена начала происходить после полной загрузки DOM струкутрыCufon.now()
refreshобновляет указанный селектор. Нужно для динамически сгенерированного/измененного контентаCufon.refresh([selector, ..])Cufon.refresh

Опции

Опция Описание Возможные значения По умолчанию
autoDetect Если установлен true, имя шрифта берется из CSS свойства font-family (не работает в Opera) true, false false
color Цвет текста. Значение берется из CSS свойства color, если не используется градиент "red", "#f62315", .. из CSS
fontFamily Имя шрифта, который будет применен Имя любого загруженного шрифта Последний загруженный шрифт
fontSize Размер шрифта. Если не задан в опциях, берется из CSS (font-size). Доступны значения только в px. "14px", "24px", "72px", .. из CSS
fontStretch Ширина символов. Если не задан в опциях, берется из CSS (font-stretch). "160%", "condensed", "semi-expanded", .. "normal"
fontStyle Стиль шрифта. Если не задан в скрипте, берется из CSS свойства font-style "normal", "italic", "oblique" Из CSS
fontWeight Жирность шрифта. Если не задан явно в скрипте, берется из CSS свойства font-weight 100-900, "normal", "bold" Из CSS
forceHitArea Фиксирует кликабильную область элемента для IE. (если у элемента, к которому применен Cufon, задано фоновое изображение, по умолчанию в IE становятся некликабильными прозрачные участки — то что не начертание букв) true, false false
hover Включать ли поддержку :hover. Можно так же явно указать как реагировать на наведение (тип значения Object) true, false, Object false
hoverables Определяет какие теги будут реагировать на :hover (в IE6 применимо только к ссылкам) { tag: true, .. } { a: true }
letterSpacing Расстояние между буквами. Если не задано явно в скрипте, берется из CSS свойства letter-spacing "-1px", .. Из CSS
separate Как переносится многострочный текст. "words" — слов не разрывать, "none" — не переносить на вторую строку, "characters" — слова можно разрывать "words"
textShadow Отображает тень текста. Если не задано явно в скрипте, берется из CSS свойства text-shadow "1px 1px #000", .. "none"
textTransform Преобразование текста. Если не задано явно в скрипте, берется из CSS свойства text-transform "uppercase", "lowercase", "capitalize", "none" из CSS
trim Как-то влияет на смежные пробелы и переносы строк. Толком не понял, нужно тестировать. "simple", "advanced" "simple"

Еще примеры

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

<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 — есть за что)
  • Примеры на рабочих сайтах
  • Список замеченных багов