Нестандартные шрифты на сайте. Cufon.

Когда возникает задача, что на сайте нужно использговать нестандартный шрифт, то можно пойти несколькими путями:

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>
Loading Disqus Comments ...
Loading Facebook Comments ...

One thought on “Нестандартные шрифты на сайте. Cufon.

  1. Алексей:

    Теперь использую сервис fontsquirrel в качестве конвертера шрифтов – http://www.fontsquirrel.com/ – загружаем шрифт в Webfont Generator, выставляем нужные опции и ждем пока сервис шрифт сконвертирует и даст на скачивание архив, в котором уже будет вся пачка шрифтов под все браузеры и css со кодом для вставки на вашу страницу.
    Правда почему-то не всегда загрузчик шрифтов работает в Firefox, зато в Google Chrome проблем не было.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *