Вывод нестандартных шрифтов на сайте (Cufon)

Несколько способов оформления текста на сайте нестандартным шрифтом:

  1. Вставить текст картинкой. В принципе подойдет, если у вас, к примеру, шрифт  используется только для логотипа.
  2. Использовать в CSS правило @font-face. У него можно указать в свойствах font-size, font-family, font-style и ссылку на шрифт (src).
    @font-face {
    	font-family: 'FreeSetWebLight';
    	src: url('/fonts/FRS45__W.eot');
    	src: local('FreeSet Web Light'), local('FreeSetWebLight'),
    	     url('/fonts/FRS45__W.eot?#iefix') format('embedded-opentype'),
    	     url('/fonts/FRS45__W.woff') format('woff'),
    	     url('/fonts/FRS45__W.ttf') format('truetype'),
    	     url('/fonts/FRS45__W.svg#FreeSetWebLight') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    

    И далее использовать этот шрифт.

    h1 {
        font-family: 'FreeSetWebLight';
    }
  3. Есть еще способ sIFR через flash, но про него ничего сказать не могу, т.к. не использовал.
  4. Если же нужно использовать нестандартный шрифт в разных местах, оптимальным считаю метод реализации через плагин «Cufon».

Пример использования плагина «Cufon».

Данный плагин формирует картинку из текста. Для его работы даже не нужно подключать Jquery на сайте, если вам нет нужды использовать селекторы, при вызове Cufon. Нужно подключить только два файла javascript. Алгоритм реализации следующий:

  1. Генерируем шрифт.
    Для работы куфона нужно из файла шрифта (напр. annabell.ttf) сгенерировать файл .js, для этого переходим по ссылке cufon.shoqolate.com/generate/. Загружаем шрифт (при необходимости несколько — жирный, курсив и т.д.), отмечаем галочки

      • The EULAs of these fonts allow Web Embedding (without Adobe Flash) (под выбором фалов шрифтов)
      • I acknowledge and accept these terms (в конце, перед кнопкой Let’s do this)

    Также, если в шрифте будут использоваться русские буквы нужно поставить галочку «All» под заголовком «Include the folowing glyphs».

    После этого жмем Let’s do it и скачивается нужный нам файл имя_шрифта.js

  2. Скачиваем дистрибутив Cufon cufon.shoqolate.com/js/cufon-yui.js
  3. Подключаем оба файла
    <script type="text/javascript" src="/js/cufon-yui.js"></script>
    <script type="text/javascript" src="/js/Annabelle_400-Rockwell_700.font.js"></script>
  4. Прописываем вызов Cufon для нужных нам элементов
    <script type="text/javascript">
        Cufon.replace("h1");
    </script>

Если вы хотите, чтобы Cufon работал с :hover, нужно добавить в его вызов параметр:

Cufon.replace('a', {
        hover: true
});

У cufon есть проблемы с css правилом line-height. В css стилях нужно прописать

#bottom .wrapper .left cufon {
 padding-bottom:10px;
}

Похожие статьи

Статья оказалась полезной? Вырази благодарность - поделись в соцсетях

Комментирование отключено