Нужно внедрить нестандартный шрифт на веб страницу?
Заметка
Нестандартный шрифт — это шрифт, который не будет установлен в ОС большинства посетителей сайта. Результат — пользователи не смогут увидеть, оценить и в полной мере восхититься фантазией дизайнера. Следствие — дизайнер не в восторге от твоей беспомощности. Следствие следствия — поиск способа сделать по макету.
Решение по старинке — картинками. Нарезали, к примеру, пункты меню, вставили на сайт и готово. Но у этого способа есть тьма недостатков. Самый неприятный из них — это отсутствие гибкости. Например, в том же меню, владелец сайта сам не сможет изменить/добавить пункт меню (если он конечно как минимум не знаком с photoshop, HTML и CSS).
По очевидным причинам, такой способ не даст возможности оформить красиво, к примеру, заголовки статей. Поэтому верстальщик вынужден искать более “сильное” решение. Одно из таких, которое достойно твоего внимания — javascript плагин Cufon.
Что делает
Позволяет внедрить любой шрифт на веб страницу без жесткой привязки к дизайну (т.е. тексты, заголовки, меню и т.п. можно будет изменять, не прибегая к услугам веб разработчиков).
Как делает
Обычный текст при загрузке страницы. заменяется на SVG объект (для браузеров, поддерживающий стандарты) или на VML (для IE) — графические области, в которых символы отрисовываются с помощью javascript.
Что качать
- cufon-yui.js — библиотека
- используем генератор “создания” шрифта для библиотеки. Сюда загружаем файл шрифта (.TTF, .OTF, .PFB), “настраиваем” его под свои нужны. На выходе получаем js-файл, который будет отвечать за отрисовку необходимого шрифта
Быстрый старт
Подключаем библиотеку и сгенерированный js-файл, указываем, к какому элементу(ам) применить данный шрифт
[sourcecode language=’html’][/sourcecode]
Демо пример. Проверено в:
- 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” |
Еще примеры
Подключение разных шрифтов на одной странице:
[sourcecode language=’html’]
[/sourcecode]
Добавление градиента и тени заголовку. Для меню включаем hover:
[sourcecode language=’Javascript’] 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
});
[/sourcecode]
Заметки
- хоть cufon и поддерживает тени, но не стоит ждать точной эмуляции text-shadow. Чтобы добиться схожести приходится повозиться. В IE с тенями еще хуже.
Материалы
- Полная документация (можно оставлять donate — есть за что)
- Примеры на рабочих сайтах
- Список замеченных багов
Источник: www.xiper.net
