Cufon — используем нестандартные шрифты
Иногда заказчик непременно хочется видеть у себя на сайте нестандартные шрифты в контенте. Если в меню и заголовках блоков еще можно скрепя сердце нарезать картинок, то с контентом этот способ уже не сработает. Что же делать?
Пока @font-face не поддерживается всеми браузерами, приходится использовать другие решения. Одним из самых удобных, легко и быстро внедряемых из них является Cufon.
Чтобы добавить к себе на сайт нестандартный шрифт с помощью Cufon, необходимо:
- Сгенерировать с помощью генератора Cufon файл, с которым работает скрипт. Для этого исходный файт вашего шрифта (в форматах, TTF, OTF), например font_name.ttf, необходимо загрузить в генератор и затем скачать получившийся font_name.js файл для работы Cufon со шрифтом.
- Скачать сам дистрибутив cufon
- Подключить скрипты к странице/шаблону страницы:
<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/font_name.js"></script> - Указать, к каким элементам будем применять наш нестандартный шрифт, например заголовки h1:
<script type="text/javascript">
Cufon.replace("h1");
</script>
Размер и цвет шрифта подтянется из стилей, прописанных для элемента, для которого мы применяем Cufon, точно также, как для текстов, выполненных системным шрифтом.
Не все в мире идеально, и у Cufon есть недостатки:
- если у пользователя отключен javascript, всей красоты несистемного шрифта он так и не увидит
- в некоторых браузерах наблюдается задержка при загрузке несистемных текстов