Cufon, или 100500 шрифтов на вашем сайте

Июль 31st, 2010 Рубрики: JavaScript, Вкусняшки coubertin.cz www.colvillewoodworking.com

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

  • Уговорить себя/заказчика/дизайнера не использовать сторонние шрифты вообще 🙂
  • Поступать как индусы и нарезать Jpeg картинок. Так уже не делает никто за исключением отъявленных индусов.
  • CSS3, лично я пока отвергаю его т.к. он поддерживается слабо да и не всеми браузерами.
  • sIFR, хорошая вещь, но требует наличия Flash плагина.
  • Cufon, вот это по мне.

Cufon, Cufon… Cufon?

Какие плюсы у него есть и почему я его так люблю:

  1. Не требует каких либо плагинов — используются только средства, нативно поддерживаемые браузером.
  2. Совместим со всеми распространенными  браузерами.
  3. Простота использования, все понятно и красиво.
  4. Быстро работает даже при большом количестве текстов.
  5. Прекрасно индексируется как и обычный текст.

Как же ты устроен?

Cufon состоит из генератора шрифта ( который преобразует шрифты в форматах TTF и OTF в промежуточный формат используемый далее ) и движка рендеринга на JavaScript.

Разработчики потрудились на славу и для работы требуется подключить всего 2 файла JavaScript.

Test, test, test…

Пора показать работу Cufon’а во всей красе. Берем любой шрифт и идем на http://cufon.shoqolate.com/generate/ загружаем туда наш шрифт и указываем что нам от него надо, от выбранных пунктов будет зависеть размер выходного файла, поэтому советую выбирать только необходимые пункты. Жмем кнопочку и получаем обработанный файл «имя_шрифта.js». А теперь нам нужно скачать сам дистрибутив Cufon’а, идем по адресу http://cufon.shoqolate.com/js/cufon-yui.js.

В страницы подключаем наш шрифт :

1
2
<script type="text/javascript" src="./js/cufon-yui.js"></script>
<script type="text/javascript" src="./js/имя_шрифта.js"></script>

Теперь выбираем какие именно элементы страницы мы хотим прорисовать нашим шрифтом.

1
2
3
<script type="text/javascript">
 Cufon.replace("h1");
</script>

Цвет, размер и другие параметры для прорисовки берутся из правил CSS. Если они конечно заданы.

Вы все еще печетесь о пользователях IE? Тогда разработчики рекомендуют вставлять следующий код, сразу перед , либо перед вызовом любого внешнего скрипта.

1
<script type="text/javascript"> Cufon.now(); </script>

А теперь пример с использованием нескольких шрифтов.

1
2
3
4
5
6
7
<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>

Пример использования Cufon’а можно посмотреть например тут:  http://tlt-kentavr.ru/

Удачи в ваших экспериментах 😉

Похожие записи:

  1. Twitter на вашем сайте
  2. Украшаем checkbox средствами Jquery
  3. Использование разных стилей для разных разрешений
  4. PNG и Internet Explorer или фиксим PNG в IE
  5. Альтернативные шрифты при помощи @font-face
Теги: ,
Оставить комментарий | Trackback

8 комментариев к “Cufon, или 100500 шрифтов на вашем сайте”

  1. Set
    Январь 15th, 2013 at 09:02
    1

    Проблема с 9-м IE. Обновите скрипт cufon на вашем сайте. У меня тоже сейчас проблема с отображением во всех браузерах нормально работает кроме IE

    [Ответить]

    ZekMan Reply:
    Январь 20th, 2013 at 06:56

    Обновлю, но мой вам совет — переходите на web fonts

    [Ответить]

  2. Leonid
    Февраль 12th, 2013 at 19:00
    2

    Все хорошо с куфоном. Но вот проблема в том, что шрифт, выбранный заказчиком, не поддерживает кириллицу. При переводе возникла проблема. Нашли более менее подходящий/похожий шрифт. Но не хочется терять старый. Можно ли сделать так, чтобы при использовании латиницы задействовался первый шрифт (без кириллицы), а при переключении на оную. подключался второй шрифт.
    Пример неработающего скрипта:

    Cufon.replace(‘gallery-title’, { fontFamily: ‘P22 Hopper Josephine’ });
    Cufon.replace(‘gallery-title’, { fontFamily: ‘Ariadna script’ });

    Заранее спасибо.

    [Ответить]

    ZekMan Reply:
    Февраль 12th, 2013 at 19:04

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

    [Ответить]

  3. Leonid
    Февраль 13th, 2013 at 16:46
    3

    «Даже не знаю что Вам ответить. Все что могу предложить это найти подходящий шрифт с кириллицей и латиницей, или как вариант собрать свой шрифт.»
    Печально. а как собрать свой шрифт? И можно ли как раз из двух скомпоновать один: лат от первого, кириллица от второго..

    [Ответить]

  4. Вася
    Октябрь 24th, 2013 at 14:11
    4

    П**деж полный, не индексируется текст и даже банально поиск браузером по тексту нельзя сделать

    [Ответить]

    ZekMan Reply:
    Октябрь 25th, 2013 at 13:35

    На момент написания статьи это был самый оптимальный вариант подключить сторонние шрифты. Индексируется он нормально.
    Но на данный момент лучше использовать font-face

    [Ответить]

Написать комментарий