Cufon – имплементация нестандартных шрифтов
Открыл недавно для себя интересную библиотеку для имплементации нестандартных шрифтов на сайт, которая очень удобна и легка в обращении.
Cufon является достойной альтернативой sIFR, который уже заслужил наше доверие множеством проектов, но который, не смотря на все его достоинства и заслуги является трудным для имплементации, не говоря уже о кроссбраузерности для которой разработчику придется постараться.
так, чтоб не быть голословным рассмотрим первый пример:
Вы можете открыть пример в новом окне.
так, как он работает
Cufon имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата.
Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript.
Как инициализировать Cufon
Шаг 1 – скачать последнюю версию библиотеки
На официальном сайте рекомендуется использовать YUI-compressed версию cufón. Потому, что для апдейта версии нужно будет всего лишь обновить cufon-yui.js
Шаг 2 – конвертировать шрифт
Для конвертации шрифта в нужный формат можно воспользоваться генератором на официальном сайте, или скачать локальную версию. К сгенерированному файлу добавляется число 400 – это соответствует нормальному шрифту, если шрифт жирный добавляется 600.
Шаг 3 – подключение JS
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Frutiger LT Std.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>
Еще несколько примеров для затравки
А теперь ложка дегтя в эту бочку меда
- Текст замещенный с помощью Cufon выделить нельзя, т.к. используется тег canvas
- При инициализации в селекторе указывается конкретный тег
Второй пункт было бы для меня решающим в выборе между sIFR и Cufon в сторону sIFR, если бы не приятное нюанс. Если у вас установлена хоть один из фреймверков типа jQuery, MooTools или Prototype на сайте, то Cufon начинает понимать контекстные селекторы типа “#content h1″ и т.п.
тог
Последнее время появляется множество методик отображения нестандартных шрифтов на сайте, и с каждым новым продуктом все легче и легче отобразить красивый шрифт в наших сайтах. Cufon это яркое подтверждение этому.
22 Коментариев to Cufon – имплементация нестандартных шрифтов
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
К сожалению это решение тоже отнюдь не кросбраузерное и тем более не кросплатформенное.
А с чем именно у вас возникла проблема?
Во всех популярных браузерах на PC все нормально, лично проверил FF2+, Opera 9.5+, Safari 3, Chrome, IE6+ и даже на Mac в Safari все ОК.
Возможно ли использовать данный скрипт для ссылок? Я попробовал написать данный скрипт под ссылки, и стилиализация их (смена цвета, уборка линии при наведении) просто не работает…
Не пойму что конкретно вы имеете ввиду, но добавил в пример ссылки с разной стилизацией, из чего видно что Cufon подхватывает нужные стили из css.
В Css 3 очень легко и удобно использовать кастомные шрифты, жалко что пока это понимают только 2-3 браузера =(
Неплохие примеры приведены тут http://www.zenelements.co.uk/blog/css3-embed-font-face/
2AvatariuS
Cufon.replace(‘#id’,{hover:’true’});
Вот тут подробно:
http://wiki.github.com/sorccu/cufon/api
Mekeme, Алексей, спасибо) Теперь понятно…
Всё работает. 100%
Столкнулся с такой проблемой может кто поможет решить, поставил нестандартный шрифт все окей робит супер но иероглифы не поддерживает как сделать что бы они отображались а то пишешь и пусто смотришь в исходном коже там все окей а визуально пусто, так же сразу скажу что сам шрифт нормально пишет иероглифы это проверенно в фотошопе.
Не подскажете как решить проблему. при использовании Cufon в момент загрузки сайта видна замена стандартного шрифта на нужный. Выглядит довольно некрасиво Cufon.now перед body добавила. Глюк во всех браузерах.
Если вы пользуетесь каким-либо фреймверком – попробуйте инициализировать куфон из функции отрабатывающей по событию “dom ready”
пример:
Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
});
Подскажите пожалуйта. спользовала Cufon для добавления нестандартного шрифта. Работает, но в момент загрузки страницы во всех браузерах сначала загружается стандартный шрифт, а уже потом мой. Выглядит довольно некрасиво. Cufon.now() перед /body вставила.
К сожалению фреймверком не умею пользоваться, только начинаю работать в этой области. Пишу в html, css и скриптами. Этими средствами нельзя обойтись ?
К сожалению просто средствами html, css этого не пофиксить. Подключите фреймверк и инициализируйте куфон как я указал это в предыдущем коментарии.
В OPERA 9.6 в полноэкранном режиме(F11), из-за него страница отображается вообще без css стилей.
Вы думаете это проблема Cufon? последние версии Оперы крайне не стабильные, последняя нормальная версия, на мой вгляд, 9.25.
Да и в принципе Cufon тоже обновляется, в статье используется более старая версия чем на офф. сайте, посмотрите в вашей версии Оперы примеры на их сайте.
Ребят, а как переконвертировать в Cufon защищенный шрифт!?
Спс за статью. Куфон этот – отличная штука, только что несколько канадских сайтов смотрел, думал СФР, смотрю, теги непонятные. Гугл вывел на этот сайт по запросу “cufon”. Теперь все ясно: будем куфонить :). Заголовки на сайтах должны привлекать внимание – это факт!
Народ есть косяки в опере :(
в IE8 не пашет
а скажите пожалуйста, вот у Вас в примере “Съешьте еще этих мягких французских булочек” – вторая строчка, шрифт там из точек, как он называется??
Perfo