+375 (29) 174-29-71 +375 (29) 774-29-71
Главная Блог Веб-разработка Нестандартные шрифты для сайта

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

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

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

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

Самый лучший выход из сложившейся ситуации – подключение нестандартного шрифта методом cufon.

Преимущества метода cufon:

  • Поддерживается практически всеми браузерами (в отличие от Googlefonts, который поддерживается в основном только Google Chrome).
  • Простой и понятный в использовании.
  • Высокая скорость обработки (практически не нагружает сайт).

Подключение нестандартного шрифта.

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

Первый шаг: следуем по данной ссылке http://cufon.shoqolate.com/generate для генерирования промежуточного шрифта в формате js (в моем пример шрифт StudioScriptCTT.ttf) и загружаем в форму имеющиеся файлы (если имеются варианты в жирном и курсивном начертании, их подгружаем тоже). Дополнительные настройки отмечаем по желанию (например, поддержку кириллицы, при условии что оригинальная версия шрифта ее поддерживает). Затем соглашаемся с условиями предоставления услуг и нажимаем кнопку «Letsdothis». Скачиваем сгенерированный файл.

Второй шаг: скачиваем дистрибутив Cufon. Скачать можно тут (14 КБ).

Третий шаг: подключаем скаченные файлы на свой сайт. Вставляем их в код , например, в пределах тега <head>…</head>. У меня получились следующие строки для вставки:

<script type="text/j-avascript" src="/js/cufon-yui.js"></script>

<script type="text/j-avascript" src="/js/StudioScriptCTT_400.js"></script>

 

Четвертый шаг: Присваиваем новый нестандартный шрифт для элементов текста на странице. Например, для всех заголовков h3. Необходимо на сайт добавить следующий код:

<script type="text/j-avascript">
    Cufon.replace("h3");
</script>

Дополнительныенюансы:

Визуализация тега h3 по цвету, размеру, наклону берется из CSS, но если нам нужны более тонкие настройки визуализации cufon, то можно поступить так:

<script type="text/j-avascript">
Cufon.replace("ul.menu li.active a", {color:'#000000'});
</script>