Это всего лишь один из способов. Но мне он понравился. Есть несколько минусов, но работается мне с этой штуковиной отлично. Минусы… текст в некоторых бразерах не выделяется, не подсвечиваются ссылки сгенерированные Cufon, также при увеличении размера шрифта, шрифт, который был сгенерирован c помощью Cufon не растет, это конечно можно вылечить, если перезапустить генерацию шрифта, после того как юзер увеличил шрифт.

Итак, чтобы добавить поддержку шрифта делаем следующее.

1) http://download.github.com/sorccu-cufon-2972b8b.zip качаем архив, заходим в папку generate и генерируем специальный js файл.
Выбираем шрифты, если вам нужен только простой текст создать, с помощью дополнительного шрифта, то можно выбрать просто Regular Typeface, а остальные типы шрифта не выбирать.

Например я хочу чтобы у меня была поддержка шрифтов нормального вида и курсива, я захожу на страницу http://cufon.shoqolate.com/generate/ – и выбираю там из моей папки со шрифтами LTe50269.ttf для обычного шрифта и LTe50270.ttf для курсива.
Это два файла со шрифтом Helvetica Neue Ultralight 25, один курсив второй обычный.

The EULAs of these fonts allow Web Embedding ставим галку.
I acknowledge and accept these terms ставим галку.

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

Жмем Let’s do it – получаем файл.

На этой странице вы можете почитать родной мануал http://wiki.github.com/sorccu/cufon/about если с английским все впорядке.

Includes the following glyphs выбираем ALL, можете выбрать другой, ALL выбирает все символы.
Security – впишите название вашего домена, чтобы другие люди не могли использовать ваш файл шрифта.

переименуйте его в font.js

2) Возьмите из папки js файл cufon.js и ваш font.js файл и поместите с вашим html документом.

3) Добавим в head следующий код.

                <script src="cufon.js" type="text/javascript"></script>
		<script src="font.js" type="text/javascript"></script>
 
		<script type="text/javascript">
			Cufon.replace('h1');
		</script>

Все, теперь ваши h1 – заголовки превратятся в красивые заголовки с новым шрифтом. Кстати если у вас doctype transitional, то будут проблемы с line-height атрибутом, если перейдете на strict, проблема исчезнет.

Также с помощью данной штуки можно добавить градиенты и тени для вашего текста и если у вас подключена какая-либо библиотека (mootools, Jquery и помоему Prototype), то в Cufon.replace(’h1′) можно применять селекторы этой библиотеки. Скрипт астоматом распознает библиотеку и начинает работать с ней.

Для того чтобы добавить градиенти тень, заменить соответствующие строки на:

<script type="text/javascript">
			Cufon.replace('h1', {
				color: '-linear-gradient(#ff9900,  #fff)',
				textShadow: '#000 2px 2px'
			});
		</script>

color: ‘-linear-gradient(#ff9900, #fff)’ создает переход от орандевого к белому, можно еще добавить цветов через запятые, например color: ‘-linear-gradient(#ff9900, #fff, #000)’
textShadow: ‘#000 2px 2px’ аналогично, создает тень с цветом #000 отступ 2px вниз, если придать отрицательное значение тень будет выше чем текст, можно также через запятую добавить несколько теней, например так: textShadow: ‘#000 2px 2px, #ff9900 4px 4px’

Удачи. Если что-то не получается пишите комменты помогу.

Комментарии