Cufon - замена нестандартных шрифтов на сайте
Замена шрифтов с помощью технологии Cufon
Раньше доводилось часто слышать от верстальщиков и программистов, что использовать нестандартные шрифты на сайте это неправильно. И мы соглашались на стандартные шрифты Arial, Helvetica, Verdana, Tahoma, Times New Roman, Trebuchet MS. Но технологии развиваются и сейчас это уже не проблема, но давайте рассмотрим какой же метод лучше использоваться для замены нестандартных шрифтов на вашем сайте.
Новые способы замены шрифтов на сайте
Последние годы веб-дизайнеры искали решение проблемы использования нестандартных шрифтов на сайте, это те шрифты, которые могут быть не установлены у пользователя по умолчанию. И вот список способов замены шрифтов:
- Cufon Font replacement technique
- sIFR Technique
- Flir ( Facelift )
- Typeface.js
- @font-face
В данной статье мы рассмотрим только метод Cufon, так как на наш взгляд он является наиболее оптимальным.
Преимущества использования технологии Cufon:
- Основан на Javascript/jQuery
- Не требует установленного флэш-плеера на сайте (более быстродейственный)
- Очень прост в установке и настройке
- Работает на мобильных устройствах
- Не требует дополнительного кода CSS, как этого требует технология sIFR
- Кроссбраузерность
Есть мнение, что Cufon не поддерживает эффект CSS hover при наведении на него мышки. Но вы можете очень просто сделать это с помощью
Cufon.replace('h1',{hover: true});
Что требуется для использования Cufon
Вот список того, что вам потребуется установить:
1. Основную библиотеку jQuery ( http://jquery.com)
2. Базовый файл Cufon ( http://cufon.shoqolate.com )
3. Выбранный шрифт.
Сам файл шрифта сам по себе не будет работать, вам нужно загрузить его на домашнюю страничку Cufon для преобразования его в необходимый формат javascript, а вот этот файл вы уже должны подключить.
Как установить Cufon на сайт
Скопируйте все необходимые файлы на сервер, например, в папку scripts и вставьте следующий код тэг <head>…</head>
<script type="text/javascript" src="scripts/jQuery_file"></script>
<script type="text/javascript" src="scripts/Cufon_file"></script>
<script type="text/javascript" src="scripts/JavaScript_font"></script><//font><//font></><//><//font>
<script>
Cufon.replace('#content h1, #menu a, #news h2');
</script>
Пусть ваши сайты будут красивыми!