Когда возникает задача, что на сайте нужно использговать нестандартный шрифт, то можно пойти несколькими путями:
1. font-face метод – для этого достаточно в CSS написать (данный метод не поддерживается в браузерах IE). Хотя метод достаточно распространненный, когда вы готовы закрыть глаза на невозможность отображения в Internet Explorer
@font-face {
font-family:'Hagin Caps Medium';
font-style:normal;
font-weight:400;
src:local('Hagin Caps Medium'), local('HaginCapsMedium'), url('HaginCapsMedium.otf') format('opentype');
}
2. Нарезать картинок с заголовками из jpg и вставлять вместо текста картинки.
3. sIFR – наиболее употребляемый на сегодняшний день, но его недостаток – требует наличия Flash-плагина. Хотя в нынешнее время это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
4. Typeface.js
5. Cufon – cегодня это самый новый метод, который является достойной альтернативой sIFR и показывает превосходные результаты, который и будет рассмотрен.
Преимущества использования технологии Cufon:
- – Основан на Javascript/jQuery;
- – Не требует установленного флэш-плеера на сайте (более быстродейственный);
- – Очень прост в установке и настройке;
- – Работает на мобильных устройствах;
- – Не требует дополнительного кода CSS, как этого требует технология sIFR;
- – Кроссбраузерность
Есть мнение, что Cufon не поддерживает эффект CSS hover при наведении на него мышки. Но вы можете очень просто сделать это с помощью
Cufon.replace('h1',{hover: true});
Как работает
Cufon состоит из двух независимых частей – генератора шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат, который будет использоваться далее. Вторая часть – движок рендеринга на JavaScript.
В итоге для работы необходимо подключить всего 2 JavaScript файла и можно наслаждаться.
Что требуется для использования Cufon
Вот список того, что вам потребуется установить:
1. Основную библиотеку jQuery ( http://jquery.com)
2. Базовый файл Cufon (http://cufon.shoqolate.com )
3. Выбранный шрифт.
Сам файл шрифта сам по себе не будет работать, вам нужно используя генератор создания шрифта преобразовать его в необходимый формат javascript, а вот этот файл вы уже должны подключить. Для преобразования можно использовать .TTF, .OTF или .PFB файлы
Как подключить Cufon на сайт
Скопируйте все необходимые файлы на сервер, например, в папку scripts и вставьте следующий код тэг <head>…</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/JavaScript_font"></script>
Теперь выбираем элементы, к которым необходимо применить нестандартный шрифт:
<script>
Cufon.replace("#content h1, #menu a, #news h2");
</script>
Теперь использую сервис fontsquirrel в качестве конвертера шрифтов – http://www.fontsquirrel.com/ – загружаем шрифт в Webfont Generator, выставляем нужные опции и ждем пока сервис шрифт сконвертирует и даст на скачивание архив, в котором уже будет вся пачка шрифтов под все браузеры и css со кодом для вставки на вашу страницу.
Правда почему-то не всегда загрузчик шрифтов работает в Firefox, зато в Google Chrome проблем не было.