Free-Studio — создание сайтов

Cufon — используем нестандартные шрифты

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

Пока @font-face не поддерживается всеми браузерами, приходится использовать другие решения. Одним из самых удобных, легко и быстро внедряемых из них является Cufon.

Чтобы добавить к себе на сайт нестандартный шрифт с помощью Cufon, необходимо:

  1. Сгенерировать с помощью генератора Cufon файл, с которым работает скрипт. Для этого исходный файт вашего шрифта (в форматах, TTF, OTF), например  font_name.ttf, необходимо загрузить в генератор и затем скачать получившийся font_name.js файл для работы Cufon со шрифтом.
  2. Скачать сам дистрибутив cufon
  3. Подключить скрипты к странице/шаблону страницы:
    <script type="text/javascript" src="/js/cufon-yui.js"></script>
    <script type="text/javascript" src="/js/font_name.js"></script>
  4. Указать,  к каким элементам будем применять наш нестандартный шрифт, например заголовки h1:
    <script type="text/javascript">
    Cufon.replace("h1");
    </script>

Размер и цвет шрифта подтянется из стилей, прописанных для элемента, для которого мы применяем Cufon, точно также, как для текстов, выполненных системным шрифтом.

Не все в мире идеально, и у Cufon есть недостатки:

  1. если у пользователя отключен javascript, всей красоты несистемного шрифта он так и не увидит
  2. в некоторых браузерах наблюдается задержка при загрузке несистемных текстов



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