Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Типографика

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

  • 29.05.2011
Total
0
Shares
0
0
0
0
0
0

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

Заметка

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

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

Total
0
Shares
Телеграфировать 0
Поделиться 0
Репост 0
Твитнуть 0
jokar

Предыдущий материал
  • Блог

Деятельность ИП: принципы ведения бизнеса

  • 29.05.2011
  • Annat
Read More
Следующий материал
  • Блог

Выходные с гостями.

  • 31.05.2011
  • bueno-baunti
Read More
Вас также может заинтересовать
Read More
  • Типографика

Веб-типографика сегодня. Часть V

  • marrisa
  • 18.01.2011
Read More
  • Типографика

Веб-типографика сегодня. Часть IV

  • bordosya
  • 18.01.2011
Read More
  • Типографика

Веб-типографика сегодня. Часть III

  • dins1904
  • 18.01.2011
Read More
  • Типографика

Веб-типографика сегодня. Часть II

  • Liska
  • 17.01.2011
Read More
  • Типографика

Веб-типографика сегодня. Часть I

  • Liska
  • 16.01.2011
Read More
  • Типографика

Основные тенденции в современной типографике.

  • Lesnikov_O
  • 15.01.2011
Read More
  • Типографика

Знак охраны авторского права

  • Annat
  • 15.01.2011
Read More
  • Типографика

Амбиграммы

  • dins1904
  • 14.01.2011

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Рассылка как продукт
    • 24.07.20
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.18
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.18
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.17
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.17
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter