Cufon – имплементация нестандартных шрифтов

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

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

так, чтоб не быть голословным рассмотрим первый пример:


Вы можете открыть пример в новом окне.

так, как он работает

Cufon имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата.

Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript.

Как инициализировать Cufon

Шаг 1 – скачать последнюю версию библиотеки

На официальном сайте рекомендуется использовать YUI-compressed версию cufón. Потому, что для апдейта версии нужно будет всего лишь обновить cufon-yui.js

Шаг 2 – конвертировать шрифт

Для конвертации шрифта в нужный формат можно воспользоваться генератором на официальном сайте, или скачать локальную версию. К сгенерированному файлу добавляется число 400 – это соответствует нормальному шрифту, если шрифт жирный добавляется 600.

Шаг 3 – подключение JS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
        <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
            Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
        </script>
    </head>
    <body>
        <h1>This text will be shown in Frutiger LT Std.</h1>
        <h2>This text will be shown in Myriad Pro.</h2>
    </body>
</html>

Еще несколько примеров для затравки

А теперь ложка дегтя в эту бочку меда

  • Текст замещенный с помощью Cufon выделить нельзя, т.к. используется тег canvas
  • При инициализации в селекторе указывается конкретный тег

Второй пункт было бы для меня решающим в выборе между sIFR и Cufon в сторону sIFR, если бы не приятное нюанс. Если у вас установлена хоть один из фреймверков типа jQuery, MooTools или Prototype на сайте, то Cufon начинает понимать контекстные селекторы типа “#content h1″ и т.п.

тог

Последнее время появляется множество методик отображения нестандартных шрифтов на сайте, и с каждым новым продуктом все легче и легче отобразить красивый шрифт в наших сайтах. Cufon это яркое подтверждение этому.

Tags: , ,

Воскресенье, Май 10th, 2009 HTML, JS Plugins, JavaScript

28 Коментариев to Cufon – имплементация нестандартных шрифтов

  • androngo:
    02.02.2011 в 03:57

    $(document).ready(function(){
    Cufon.replace(‘h1′, { fontFamily: ‘Frutiger LT Std’ });
    });

    Не помогает, все равно сначала появляется обычный шрифт, а потом он кафунится

  • Евгений:
    11.02.2011 в 20:25

    Есть какие нибудь нюансы при работе с ним? т.к. в IE8 у меня не работате, а вот в Opere и Лисе все отлично.

    не хочется оставлять IE

  • bibikl:
    27.03.2011 в 03:47

    Вот пример, где без всякого cufona все работает
    http://superbook.azbyka.ru

    • « Предыдущие комментарии

    Оставить сообщение

    Rotaban.ru - биржа банерной рекламы
    Видео курс - "JavaScript. Больше, чем просто сайт"

    Архивы