Cufon. Загружаем нестандартные шрифты на сайт

Cufon – библиотека написанная на java script. Ее предназначение очень простое – использование нестандартных шрифтов на html страницах в независимости от того, установлен ли этот шрифт на клиентской машине.

В отличие от использования картинок этот метод хорош тем что не нужно для например менюшки нарезать кучу изображений. А если вы например хотите что бы у вас заголовки статей выводились другим шрифтом, как быть в этой ситуации и вот тут на помощь приходит эта чудесная библиотека.
Единственный минус что при выделении текста с этим шрифтом, текст не выделяется, но если проверить код страницы то все написано текстом, то есть поисковики даже не заметят что что-то вы химичили с текстом, правда этот текст находиться в куче тегов которые прописывает библиотека, но как говориться красота требует жертв :)

Ну и расскажу как сделать красивый шрифт.
Сначала нужно сгенерировать этот шрифт.
То есть зайти вот сюда http://cufon.shoqolate.com/generate/ и там в поле нажать обзор, выбрать шрифт который вы хотите загрузить. Так же нужно поставить галочку что вы соглашаетесь с EULAs, она находиться возле такого предложения «The EULAs of these fonts allow Web Embedding (without Adobe Flash)»

Идем дальше.
Если будете использовать русские буквы, то нужно поставить галочку возле «Russian Alphabet». Находиться чучуть ниже где большой список с настройками. Там собственно настраиваете на свое усмотрение.
Внизу ставим галочку возле «I acknowledge and accept these terms»
Ну и наконец-то нажимаем в самом низу кнопочку «Let’s do this!»
Полученный файл сохраняем в папку где находиться ваша хтмл страница.

Так файл у нас есть, теперь нужно это все дело подключить.
Но сначала нужно скачать вот этот файлик http://cufon.shoqolate.com/js/cufon-yui.js
В файле хтмл страницы (или пхп не важно, в общем веб страницы :)) прописываем между теками

следующее:

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

<script type="text/javascript"> Cufon.now(); </script>
Как пишут вроде как быстрее загружаются шрифты в ИЕ.

Там же между хедами нужно прописать в каких тегах изменять шрифт

Если у вас установлена библиотека «jquery» то можно подключать нескольким тегам шрифт:

Слово "replace" маленькими буквами!

Если нужно несколько шрифтов загружать, то подключаем сверху еще один шрифт. А в рендеринге пишем:
Cufon.replace('h2', { fontFamily: 'VivaldiD CL' });

То есть тег и шрифт какой нам нужен.

Поддержка бразурами:

1. IE 6-8
2. Firefox 3
3. Opera 9.5-10.5
4. Safari 4

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

1. достаточная кроссбраузерность
2. минимум внешних файлов при любом количестве текста с нестандартным шрифтом
3. просто внедрять
4. владелец сайта спокойно может редактировать текст
5. параметры шрифта (размер, жирность, цвет) легко изменить
6. есть реакция на hover
7. возможность добавление тени тексту (text-shadow. В IE правда тень будет не совсем такая как нужно)
8. защита используемого шрифта от копирования
9. возможность разложить шрифт на только нужные символы для уменьшения размера файла-шрифта
10. не требует дополнительных библиотек
11. небольшой вес скрипта

В общем и все. Теперь у нас красивые шрифты на сайте. Надеюсь что обьяснил доступно. Глюков с этой библиотекой покаместь не видел. попользуюсь увижу. А главное преимущество что библиотека улучшается разработчиками.

Выберите оценку Плохо Пойдет Хорошо Замечательно Классно

Ваша оценка: Пусто Средняя: 3.1 (89 votes)