Как использовать нестандартные шрифты на сайте

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

Можно нарисовать на картинке, но если текст динамически меняется то потребуется подключать скрипты для обработки изображений. Вот тут парни нашли как при помощи яваскрипта выводить нестандартные шрифты.

Качаем библиотеку, куфон называется.

Указываем шрифты, какие именно символы конвертить, она выдает готовый скрипт для подключения.

Подключаем

  1. <script type=«text/javascript» src=«js/cufon-yui.js»></script>
  2. <script type=«text/javascript» src=«js/font.js»></script>

Вызываем

  1. <script type=«text/javascript»>
  2. Cufon.replace(‘h1’);
  3. </script>

Счастливым обладателям виндавса и его ослика следует добавить эту строку, чтобы не тупило

<script type=«text/javascript»> Cufon.now(); </script>

Минусы такого вызова в том что все h1 теги будут заменены. Чтобы поменять только то, что надо, спсоб следующий.

Например через яваскрипт и его getelementbyid

  1. Cufon.replace(document.getElementById(‘header’).getElementsByTagName(‘h1’));

Либо через jQuery, заюзав библиотеку от гугли и добавив ее перед вызовом куфона

<script type=«text/javascript» src=«http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js»></script>

вызывается так

  1. Cufon.replace(‘#header h1’);

Минусы: текст получается картинкой, т.е. ни выделить, ни какие либо свойства типа hover ему приписать не получится. Ну и яваскрипт ессно должен работать.

0.00 avg. rating (0% score) - 0 votes

8 комментариев

  • Любопытный способ, попробую как только руки дойдут. Спасибо.

  • Еще один способ использования нестандартных шрифтов на сайте

    • Сенкс за ссылочку.
      Яваскрипт все равно не выход тут. Проще картинкой сделать и не заморачиватся.

  • Спасибо, искал подобное решение под шрифты

  • привет
    я вот на своем сайте поднял тиц до 30
    но вот ума не приложу  чем писать — все что я знаю о СЕО я уже написал
    начал писать туда бредовые не тематические статьи
    может подскажите близкие тематики и о чем писать если сайт о СЕО и продвижении

  • Пример использования без JS фреймверков http://cleverscript.ru/index.php/javascript/13-scripts/37-cufon

  • Смею вас обрадовать, динозавры. Можно теперь только с помощью CSS подключить к сайту нестандартный шрифт.)

    • пост от 2009 года ))

css.php