11.11.2011

Использование нестандартных шрифтов на сайте с помощью Cufon

Любой вебмастер или верстальщик сталкивается с проблемой подбора шрифтов для web-разработки. То как отображаются шрифты на экране, порой, бывает важнее всех остальных элементов дизайна на web-странице.

Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.

Основным правилом, которому действительно нужно следовать при выборе шрифта, да и всего дизайна, - это сделать так, чтобы чтение вашего сайта было максимально комфортным для посетителя.

Раньше доводилось часто слышать от верстальщиков и программистов, что использовать нестандартные шрифты на сайте это неправильно. И мы соглашались на стандартные шрифты Arial, Helvetica, Verdana, Tahoma, Times New Roman, Trebuchet MS. Но технологии развиваются и сейчас это уже не проблема.

Для начала, давайте определимся, что же такое нестандартные шрифты?

Нестандартный шрифт — это шрифт, который не установлен на большинстве компьютеров посетителей вашего сайта. В результате пользователи не могут увидеть и оценить творческий потенциал и фантазию дизайнера.

Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufon – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Что такое Cufon?

Cufon позволяет внедрить любой шрифт на веб страницу. Поддерживаются шрифты: TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts.

Как пишут на сайте разработчики – призвание их проекта стать достойной альтернативой для sIFR, который несмотря на все свои заслуги все же несколько сложен в настройке и использовании.

Как работает Cufon?

Cufon имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата.

Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript.

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

Cufon в действии

Для конвертации шрифта в нужный формат можно воспользоваться генератором на официальном сайте, или скачать локальную версию.

При генерации шрифта, по желанию, отмечаем некие дополнительные настройки, которые необходимо, и получаем файл имя_шрифта.font.js. К сгенерированному файлу добавляется число 400 – это соответствует нормальному шрифту, если шрифт жирный добавляется 600.

Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. cufon.shoqolate.com/js/cufon-yui.js

Подключаем на странице наши файлы.

<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/имя_шрифта.font.js"></script>

Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом.

К примеру, мы хотим заменять все заголовки H1 и H2

<script type="text/javascript">
 Cufon.replace('h1');
 Cufon.replace('h2');
 </script>

Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил CSS. Если они конечно заданы.

О том как стилить не только цвет, а и практически все свойства CSS, относящиеся к тексту смотрите wiki.github.com/sorccu/cufon/styling

Да, чуть не забыл, для того чтобы Cufon начал понимать контекстные селекторы типа: #content h1, (короче вложенность) и т.п. , то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам.

Для этого нам просто надо подключать хоть один из фреймверков типа jQuery, MooTools или Prototype в документе раньше чем Cufon.


Использование нескольких шрифтов

<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>

Важно! Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).


Достоинства Cufon

  • Не требует плагинов – используются только штатные средства браузеров.
  • Работает на всех распространенных браузерах.
  • Прост в установке и настройке.
  • Удобен в управлении: можно редактировать текст, изменять параметры шрифта (размер жирность, цвет), есть реакция на hover, возможно добавление тени к тексту
  • Используемый шрифт защищен от копирования
  • Возможность генерации оптимального промежуточного шрифта, только для необходимых символов.
  • Скорость достаточно большая даже для объемных текстов.

Недостатки Cufon

  • Увеличивается трафик из-за дополнительных файлов, соответственно увеличится время загрузки страницы.
  • Текст не возможно выделить и скопировать, хотя в этом есть и определенный плюс
  • Нежелательно применять для больших объемов текстов и
  • Нежелательно использовать множество различных шрифтов – увеличивается объем страницы
  • До окончания работы скрипта пользователь видит текст шрифта по-умолчанию
  • Если javascript отключен – пользователь так же увидит текст шрифта по-умолчанию
Просмотров:
25859
Раздел:
Дизайн
Теги:
шрифт, дизайн, cufon
Комментариев: 5
5 Archielob   (01.12.2014 14:12)
I have received a blackfriday discount for you. I have a mother in law 50% discount. If you keep her forever, I will offer her to you for free

4 993368 google   (28.12.2013 14:27)
http://www.google.com/

3 Agexoxhor   (31.10.2012 16:37)
cOr http://boatsort.com/viewtopic.php?p=48090 cFk http://www.lifeincampus.com/comm/index.php?option=com_fireboard&Itemid=30&func=view&catid=28&id=5720 rIi http://saintmicheal37.org/forum/viewtopic.php?f=4&t=33474 qZw http://www.nv2it.net/vb/showthread.php?p=92859 bSg http://kolky.web.beneta.cz/forum/viewtopic.php?f=27&t=137669 wNi http://www.freak-players.de/forum/viewthread.php?thread_id=171438 qHj http://www.bloodshotgaming.com/forums/viewtopic.php?f=8&t=38548 qSi http://jesuschristdisciples.net/index.php?topic=143200 uMn http://www.littleshare.com/viewthread.php?tid=182762&extra= dXq http://www.feiyiwang.com/viewthread.php?tid=53435&extra= gAs http://streetapologetics.com/forum/index.php?topic=147633 hNh http://www.emmawatson.bigfansite.com/forum/viewtopic.php?f=3&t=357926 fXx http://www.nlptinc.com/forum/viewtopic.php?f=8&t=136990 nWx http://ososh2.bratsk.org/forum/index.php?topic=51432 fAs http://www.adelysium.com/phpBB3/viewtopic.php?f=5&t=69825 wWn http://ultracomp.su/forum/index.php?act=ST&f=3&t=43940 fDb http://vga.binghamtonsa.org/viewtopic.php?f=3&t=78875 oCc http://binnooh.com/community/index.php?topic=110762 rPj http://forum.krasnystaw.net.pl/viewtopic.php?f=4&t=10426 nPh http://iamgoingtocollege.com/site//index.php?option=com_fireboard&Itemid=54&func=view&catid=10&id=241968 lRv http://b55n-dl3na.com/vb/showthread.php?p=1137160 qZo http://www.studiolegaleverinisupplizi.it/smf/index.php?topic=135722 qEm http://staffsvdubz.co.uk/forum/showthread.php?42768-benzenediazonium-ransacked-aminothiophen-artize yLk http://www.web-developpement.net/viewtopic.php?pid=160328 yZr http://nipple.brandweer-noordwolde.nl/modules/Forums/viewtopic.php?f=2&t=900421 mBg http://www.1trost.de/phpBB3/viewtopic.php?f=2&t=162362 aWb http://guerrillamarketingforum.com/showthread.php?442491-beblood-titule-designingly-triptychs dQj http://programaradar.com.br/forum/viewtopic.php?f=2&t=2149765 tXs http://forum.londonfinnishforum.com/viewtopic.php?f=21&t=583827 aLe http://pennergame.crazy-trina.de/forum/viewthread.php?thread_id=80057 bTl http://forum.himaditanursery.com/viewtopic.php?f=2&t=88093 cCt http://radio-vantasy.co.de/forum/viewthread.php?thread_id=58231 rZw http://ww.londonfinnishforum.com/viewtopic.php?f=21&t=583215 yGe http://avonafc.110mb.com/phpBB3/viewtopic.php?f=5&t=38842 aMg http://dev.4px.ru/forum/viewtopic.php?pid=58414 iXf http://www.forexhispano.net/foro/viewtopic.php?f=6&t=1212155 bAe http://ylos.es/infopad/foro/viewtopic.php?f=6&t=529994 lBl http://ourpawan.com/forum/viewtopic.php?f=2&t=113063 cPy http://www.dcdysy.com/Bbs//viewthread.php?tid=203223&extra= wZs http://www.servston.com/vb/showthread.php?p=13415 gKx http://thegioidongho.vn/forums/showthread.php?227938-tampoon-inbetweener-bursautee-flannelmouthed vGp http://forum.darkness-cz.tk/viewtopic.php?f=2&t=85895 wBr http://darkvampires.altervista.org/viewtopic.php?f=5&t=84887 pEs http://newrevmedia.tv/forum/index.php?topic=232395 nSu http://www.amoeba.parba.cz/viewtopic.php?f=25&t=166527 iRt http://domainnamestorage.com/forum/index.php?topic=129748 bOs http://blloves.imotor.com/viewthread.php?tid=75310&extra= eZl http://grwhsiri.net/siriserver/viewtopic.php?f=4&t=227536 nYe http://forum.thekedaikamera.com/viewtopic.php?f=24&t=163746 sUz http://mechanical-engineering.co/forum/index.php/topic,142986.new.html

2 GomhemillewlY   (25.04.2012 04:48)
Дорогие Друзья
Специально для Вас создал сайт на котором cобраны отличные программы для раскрутки сайта, блога, оптимизации контента.
Пожалуйста если Вам не трудно, не удаляйте этот пост или комментарий. Заходите к нам скачивайте бесплатно
сырые базы для Хрумер, которые постоянно пополняются, базы блогов, базы досок объявлений,
свежие программы для раскрутки сайта.
Заранее извините если данная реклама не вписывается в параметры Вашего сайта или блога.
Я надеюсь что наш сайт будет полезен для Вашей раскрутки.
В течении месяца на сайте планируется публикация свежих статей по раскрутке, а так же
оптимизации сайта бесплатными методами (dle, wordpress,joomla и т.п.). Заходите очень нужны Ваши комментарии
и статьи по теме. Требуются опытные журналисты и модераторы по данной тематике. надеюсь на долгое
и плодотворное сотрудничество С вами. Наш сайт http://xceo.ru

С уважением, admin@xceo.ru

1 DREAMCRUSHER   (26.03.2012 10:43)
Не получается применить ко всему контенту. Куда в CSS вставлять? Я вставил в глобальный блок верхняя часть сайта, а в CSS куда? Поясните пожалуйста подробнее...

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]