Блог > Практика разработки web сайтов > Верстка и CSS > Замена шрифтов с помощью технологии Cufon
Замена шрифтов с помощью технологии Cufon
Всего пару лет назада слышать об использовании нестандартных шрифтов от верстальщиков и программистов было в диковинку. Сейчас времена меняются, и стандартные Arial, Helvetica, Verdana, Tahoma уже не устраивают всех. В последнее время дизайнеры и верстальщики искали оптимальный способ использования нестандартных шрифтов, которых нет у пользователя.
Вот эти технологии помогают импортировать недостающие шрифты на сайт:
- sIFR Technique;
- Flir ( Facelift );
- Cufon Font replacement technique;
- @font-face;
- Typeface.js.
Технология Cufon
По соотношению простота/цена/качество наиоболее оптимален на данный момент из них только Cufon.
Его достоинствами относительно других технологий являются:
- Собран на основе JS/jQuery;
- Быстрее обратабывается, чем другие технологии;
- Предельно упрощена настройка и установка технологии;
- Корректно отображается на мобильных платформах;
- Cufon технология наиболее кроссбраузерна.
Как работает Cufon
Cufon включает в себя две независимых части - преобразователь стандартного шрифта в собственный формат шрифта Cufon, а также Javascript-движок для отображения нового шрифта. Все достаточно просто, для работы только требуется только сконвертировать шрифт, подключить 2 JS файла и увидеть нестандартные шрифты.
Что необходимо сделать для использования Cufon
Нам необходимо скачать следующие библиотеки:
1. JS-фреймворк jQuery с официального сайта http://jquery.com;
3. Декоративный шрифт, который мы хотим применить;
2. Основной дистрибутив библиотеки Cufon с сайта http://cufon.shoqolate.com, в сжатом виде который занимает 14 кбайт.
И это еще не все. Сам по себе шрифт в данной технологии роли не играет, его еще необходимо загрузить на официальную страницу конвертера шрифтов Cufon для преобразования в специальный формат. Полученный файл скачать, и его уже подключать на страницу.
Как подключить библиотеку Cufon к своему сайту
Для начала необходимо переместить все наши сохраненные файлы на сервер и поместить между тегами <head> </head> следующий код:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="converted_font.font.js"></script>
<script>
//Прорисовываем декоративным шрифтом заголовки второго уровня
Cufon.replace('h2');
</script>
И все, технология работает.
Задать размер шрифта, цвет и начертание можно с помощью правил CSS.
Особенности использования библиотеки Cufon
- При прорисовке специфических селекторов, к примеру "#name h3.text a", обязательно необходимо подключать jQuery, MooTools или Dojo, в которых есть возможность выбора по селекторам. Подключать следует до загрузки Cufon, чтобы можно было использовать более сложные запросы.
- При использовании ИЕ, рекомендуется сразу же перед </body>, или перед вызовом любого внешнего скрипта вставить следующий код:
<script type="text/javascript"> Cufon.now(); </script>
что избавит Вас от задержки прорисовки скрипта в ИЕ.
- Все страницы должны быть в одинаковой кодировке.
- При использовании нескольких шрифтов на сайте, формат вызова должен быть следующим:
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Myriad_Pro.font.js" type="text/javascript"></script>
<script src="Frutiger_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h3', { fontFamily: 'Myriad Pro' });
Cufon.replace('a', { fontFamily: 'Frutiger Std' });
</script>
- Следует помнить, что замена шрифтов выполняется только в момент вызова рендерера:
Cufon.replace("h1.alala");
То есть, если для заголовка h1 с классом alala произвести DOM-манипуляции, то после следует вызвать вызов рендера.