Графическое отображение текста - вариант хороший, но изменение надписей может быть весьма трудоемким процессом, тем более, если на сайте текста много.
Самый лучший выход из сложившейся ситуации – подключение нестандартного шрифта методом cufon.
Преимущества метода cufon:
- Поддерживается практически всеми браузерами (в отличие от Googlefonts, который поддерживается в основном только Google Chrome).
- Простой и понятный в использовании.
- Высокая скорость обработки (практически не нагружает сайт).
Подключение нестандартного шрифта.
Для установки шрифта для сайта методом cufon вам понадобится преобразовать его в специальный формат, а затем подключить движок к сайту через JavaScript.
Первый шаг: следуем по данной ссылке http://cufon.shoqolate.com/generate для генерирования промежуточного шрифта в формате js (в моем пример шрифт StudioScriptCTT.ttf) и загружаем в форму имеющиеся файлы (если имеются варианты в жирном и курсивном начертании, их подгружаем тоже). Дополнительные настройки отмечаем по желанию (например, поддержку кириллицы, при условии что оригинальная версия шрифта ее поддерживает). Затем соглашаемся с условиями предоставления услуг и нажимаем кнопку «Let’sdothis». Скачиваем сгенерированный файл.
Второй шаг: скачиваем дистрибутив 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>