HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

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

Итак, если вдруг дизайнер подкинул вам такую задачу, как вставка нестандартного, красивого (по его мнению :) ) шрифта на сайт, то в этой шпаргалке я вам покажу один из способов, как это можно сделать.

Можно нарезать картинок на все заголовки и т.п. куда нужно, но мы пойдем более хитрым путем. Будем использовать такую вещь, как Cufon.

Ниже я вам дам ссылку где про этот метод написано больше букв, а тут расскажу вкратце что нужно делать (это же шпаргалка :) ).

Сначала нужно найти сам файл со шрифтом. Пусть, например, это будет Neutra.ttf. Теперь нам нужно сгенерировать js, который определяет этот шрифт. Для этого идем на cufon.shoqolate.com/generate/, кидаем в поле «Regular typeface» шрифт, ставим галочки в «The EULAs of these fonts allow Web Embedding (without Adobe Flash)» и «I acknowledge and accept these terms», и жмем «Let’s do this!». На выходе получаем Neutra_Display_Thin_500.font.js. С этим js и будет работать Cufon.

Теперь скачиваем сам Cufon: cufon.shoqolate.com/js/cufon-yui.js

Осталось подключить эти 2 скрипта в документ, и выбрать к каким элементам следует применить шрифт.

1
2
3
4
5
6

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Neutra_Display_Thin_500.font.js"></script>
 
<script type="text/javascript">
    Cufon.replace("h1");
</script>

Вот и всё, в данном случае к заголовку h1 будет применен шрифт Neutra. Стили (цвет, размер и т.п.) для этого заголовка будут спокойно применяться.

Если вы хотите применить шрифт для отдельных классов элементов, например .neutra, то вам придется использовать одну из библиотек, например jquery. Такой ход от разработчиков объясняется тем, чтобы не утяжелять свой скрипт дублирующими функциями, аналогичными популярным библиотекам (Prototype, jQuery, MooTools, Dojo). Что есть разумный шаг, т.к. почти ни один проект уже не обходиться без них.

Итак, пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Нестандартный шрифт на сайт</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Neutra_Display_Thin_500.font.js"></script>
<script type="text/javascript">
    Cufon.replace("h1");
    Cufon.replace(".neutra"); // С помощью jquery можно обращаться и по классам
</script>
</head>
<body>
<p>Демонстрация применения нестнадартного шрифта.</p>
<h1>Hello, world!</h1>
<p>Hello, world! I'm <span class="neutra">Neutra</span>!</p>
</body>
</html>

Скачать пример.

Разработчики для пользователей ие рекомендуют вставлять сразу перед </body>, либо перед вызовом любого внешнего скрипта, например гугл аналитикс, следующую строку:

1

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

Это должно снизить задержку перед подменой шрифта на сайте, что особо заметно, когда скрипту беспощадно отдают целые абзацы текста, что явно не рекомендуется :)

Статья на хабре, где написано по-подробнее, с еще несколькими возможностями Cufon-а: Cuf?n – используйте шрифты, какие душа пожелает.

Метки: ,

Запись опубликована 15.10.2009 в 00:16 и размещена в рубрике css, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (41) на “Нестандартный шрифт на сайт. Cufon.”

  • Иван:
    03.05.2010 в 03:32

    Здравствуйте!
    Помогите пожалуйста!
    Я всю голову сломал с вашим примером куфона — у меня он почему-то не работает.
    Может быть подскажете, что я неправильно делаю:

    Что я сделал:
    1. содержимое файла cufon-yui.js сохранил по ссылке в ту же папку, где лежит Html-ка.
    2. файлы Copyist.ttf и Sevilla Decor.ttf (у меня такие были) переконвертил на сайте, поставив галки напротив — «стандартная латинская, цифры, знаки, русская раскладка». Получившийся файл сохранил в эту же папку.
    3. Скопировал ваш код и сохранил html-ку в эту же папку, заменив в ней названия файлов. Что такое .neutra и с чем её едят пока не знаю, поэтому убирать ничего не стал.

    сохраняю файл — результат ноль.
    Что не так? помогите пожалуйста!!!

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

    Cufon.replace(«h1″);
    Cufon.replace(«.neutra»); // С помощью jquery можно обращаться и по классам

    Демонстрация применения нестнадартного шрифта.
    Hello, world Бла-бла по русски!
    Hello, world! I’m Neutra!

    Cufon.now();

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

  • Иван:
    03.05.2010 в 04:33

    Собственно я для себя локализовал проблему — она заключается, в том, что с помощью куфона удаётся передать английский язык, но не русский. Не могу понять почему.
    Может поможете?

  • Костя:
    03.05.2010 в 14:11

    Иван, чтобы сделать русский язык, надо на http://cufon.shoqolate.com/generate/ поставить галочки напротив Cyrillic Alphabet и Russian Alphabet.

  • Иван:
    03.05.2010 в 16:10

    Костя, я отметки поставил, уже и «русский» и «кириллический» и даже на всякий случай — «all» тоже поставил. Итог один — английский передаётся, а русский почему-то нет :(
    Подумал, что шрифты мои какие-то кривые, попробовал тахому стандартную прицепить — так даже она не читается в русском :(
    Может кто сталкивался с этим?

  • Иван:
    03.05.2010 в 20:23

    о! я чуть-чуть ещё разобрался!
    Оказывается браузер не понимает, что на сайте кодировка UTF-8 (Хотя там стоит галка «автовыбор»…
    Вот теперь ещё с этими граблями разбираюсь.
    Может тут поможете? :)

  • Сергей:
    09.05.2010 в 16:30

    Подскажите, пожалуйста, почему при использовании Cufon в ie6 появляется «загадочный» отступ в несколько пикселов сверху текста (в зависимости от размера текста и отступ увеличивается). Без хоков для ie пофиксить не получается, может подкажете как обойтись без этого? Заранее огромное спасибо!

  • Юрий Макусинский:
    12.06.2010 в 22:16

    Замечательная штука! Спасибо за наводку! Главное, что обработанный текст индексируется. И с кодировками все в порядке.
    Вот бы еще можно было внедрять два шрифта: рубленый и засечный…

  • Костя:
    14.06.2010 в 00:26

    Можно и по несколько шрифтов внедрять. В конце статьи ссылка на хабр, там написано.

  • Vels:
    12.07.2010 в 15:14

    Спасибо!
    хорошая мулька…
    и да сгинут дизайнеры использующие не стандартные шрифты!
    хотя с этим способом сразу стало легче…

  • Виктор:
    24.08.2010 в 18:47

    Всё замечательно, но в Opere не работает.

  • Виктор:
    24.08.2010 в 19:10

    Прошу прощения, в Opere всё ок. Был баг с подключением куфона на сайте.

  • Olga:
    05.09.2010 в 20:48

    кто может подсказать?
    если такая ситуация, есть навигация куфоном и выпадающее меню, обычный ариал, можно как то сделать что бы выпадающее меню не наследовало замену куфоном??
    заранее спасибо=)

  • Анатолий:
    23.09.2010 в 17:42

    Спасибо за мануалочку! Просто агромное спасибо!…а вопрос можно ли как-то увеличить шрифт?

  • medium:
    04.10.2010 в 13:00

    не читает русские символы не хрена, этот вопрос поднимался а решения никто не написал

  • Костя:
    04.10.2010 в 13:41

    Чтобы читался русский шрифт, нужно сделать следующее:
    1. Чтобы сам шрифт был с кириллицей;
    2. На странице cufon.shoqolate.com/generate/ залить шрифт и отметить галочками The EULAs of these fonts allow Web Embedding (without Adobe Flash), Cyrillic Alphabet, Russian Alphabet, I acknowledge and accept these terms.
    Все работает.

  • Костя:
    04.10.2010 в 13:44

    А чтобы в ИЕ пропали ненужные отступы вокруг букв, можно, например, в CSS прописать так:
    cufon{float:left;} /* да простят меня боги CSS */

  • Сергей:
    22.10.2010 в 14:30

    Подскажите, а как можно 2и по возможности 3 шрифта юзать.
    Например в H1 — использовать один шрифт а в
    H2— другой?

  • Аноним:
    31.10.2010 в 19:24

    Сергей, ниже есть ссылка на хабр, там описан твой случай.

  • Ирина:
    05.11.2010 в 03:54

    Спасибо Вам огромное! Я уже две ночи ломаю голову, почему в таком красивом шаблоне Via Granitti (http://www.globbersthemes.com/demo/via-granitti/index.php?option=com_content&view=article&id=22&Itemid=34&e26383647b9efb3fe20b749a36815d3c=188da981c96b25c37da5ca54f7822b3e) русские буквы пропадают из названий меню, а в основном тексте есть…..не сразу выяснила, что причина — в подмене букв картинками…которые в шаблоне были только английский…Ваша статья меня спасла! Еще раз спасибо!

  • Евгений:
    13.11.2010 в 11:13

    Всем привет! Кто нибуть сталкивался с проблемой такого плана: в FF и IE все работает отлично. Но в Opera отображаются как обычно текстом.
    Подскажите.

  • Аноним:
    14.11.2010 в 16:57

    Привет, Евгений, бывало такое с битриксом, а именно когда подключались дополнительные файлы .css, когда внутри них ничего не было, т.е. они были пустые. Лечилось это либо удалением подключения этих файлов, либо добавлением в пустой файл любой строки, например:»body{}».

  • Павел:
    17.11.2010 в 11:19

    все получилось, но шрифт является элементом меню и нужно изменять его цвет (только цвет) при наведении мыши. Может кто подскажет как?

  • Аноним:
    17.11.2010 в 11:31

    Видел подобное на этом сайте http://www.portal-company.ru/
    Там сделали сначала с помощью js меняют цвет пункта меню, а потом прогоняют куфон.
    типа такого:
    $(«#menu>ul>li»).hover(
    function(){
    $(this).children(«a»).css({‘color’:'#000′});
    Cufon.replace(this);
    });

  • Павел:
    17.11.2010 в 13:03

    Спасибо за подсказку, Аноним. У меня не получается — не спец я в js. Прошу выйти со мной на связь maslennikovp@mail.ru если есть возможность платно сотрудничать.

  • Аноним:
    17.11.2010 в 13:15

    Павел, попробуй как на том сайте.
    Там сначала jquery подключаешь, потом пишешь такую функцию:

    $(document).ready(function(){
    $("#menu>ul>li").hover(
    function(){
    $(this).children("a").css({'color':'#000'});
    Cufon.replace(this);
    },
    function(){
    $(this).children("a").css({'color':'#545454'});
    Cufon.replace(this);
    };
    }
    )
    })

    тут со скобками и кавычками мог напутать

  • Аноним:
    17.11.2010 в 13:16

    тут получается на ховер даем цвет #000 и когда мышку уводим #545454

  • Павел:
    15.12.2010 в 15:57

    в итоге получилось (не сам делал по вышеназванной причине). Кому интересно, может посмотреть http://brandburg.com/index/0-43
    Но вот еще вопрос — как сделать line-height поменьше. Прописывание в css вообще никак не влияет на line-height для нестандартного шрифта. Наверное в java нужно прописать. Вопрос — как.

  • Аноним:
    15.12.2010 в 17:13

    С line-height у куфона проблемы. можно в стилях попробывать типо такого:

    #menu cufon{padding-bottom:3px;}

    тега cufon в html конечно не существует, и валидатор покраснеет, но кому валидность не существенна, то можно писать.

  • toorr2p:
    22.01.2011 в 09:37

    Есть еще материал с примером использования без mootools или jquery http://goo.gl/fb/5WytF

  • Анатолий:
    12.02.2011 в 19:40

    ЧТОБЫ РУССКИЙ ПОШЕЛ НАДО ВМЕСТО UTF-8 СТАВИТЬ Windows-1251

  • Aswex:
    19.03.2011 в 18:03

    спасибо за статью, как раз то что искал!

  • grec:
    14.05.2011 в 16:51

    НЕ РАБОТАЕТ РУССКИЙ!
    И галочки ставил и кодировку Windows-1251
    Помогите сделать русский!!! S.O.S.

  • GillSans:
    14.05.2011 в 17:59

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

    Cufon.replace(«h1″);

    русский, english

  • Евген:
    22.06.2011 в 02:05

    а как вот к такому примеру: http://brandburg.com/index/0-43
    т.е.
    Cufon.replace(«.bankgothicruss»,{
    color: «#000000″,
    hover:{
    color:»#FFD100″
    }}
    );
    можно пририсовать состояние активно нажатой кнопки?

  • Евген:
    22.06.2011 в 02:07

    GillSans, нужно при генерации в cufon кирилицу отметить, если я правильно понял Вашу проблему.

  • Виталий:
    28.09.2011 в 13:00

    А как сделать шрифт подчеркнутым? И такое возможно?

  • rammlied:
    07.11.2011 в 04:42

    все обыскал, не нашел, ну или где нашел не понял или не работает.
    Как сделать подмену в инпуте?

    Вот хелло нужно закуфонить )
    Спасибо

  • rammlied:
    07.11.2011 в 04:44

    блин, про вставку кода забыл…

    <input type=submit class=class value=Hello>

  • Greg:
    05.01.2012 в 19:08

    У меня скрипт шрифта (Cambria) получился около 7МБ. Это больно, буду признателен за подсказку как можно уменьшить.

  • Greg:
    05.01.2012 в 19:12

    Извините, отключил лишние галочки и а получил 260К

  • Хотели в Пазарджик:
    14.01.2012 в 21:32

    Где скачать руссиан (cyrilic) шрифт

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос