Любой вебмастер или верстальщик сталкивается с проблемой подбора шрифтов для web-разработки. То как отображаются шрифты на экране, порой, бывает важнее всех остальных элементов дизайна на web-странице.
Выбор шрифтов — ответственный момент. Конечно выбором шрифта для элементов дизайна сайта, должен заниматься дизайнер, но выбор шрифта для контента обязательно должен согласовывать с верстальщиком.
Основным правилом, которому действительно нужно следовать при выборе шрифта, да и всего дизайна, - это сделать так, чтобы чтение вашего сайта было максимально комфортным для посетителя.
Раньше доводилось часто слышать от верстальщиков и программистов, что использовать нестандартные шрифты на сайте это неправильно. И мы соглашались на стандартные шрифты Arial, Helvetica, Verdana, Tahoma, Times New Roman, Trebuchet MS. Но технологии развиваются и сейчас это уже не проблема.
Для начала, давайте определимся, что же такое нестандартные шрифты?
Нестандартный шрифт — это шрифт, который не установлен на большинстве компьютеров посетителей вашего сайта. В результате пользователи не могут увидеть и оценить творческий потенциал и фантазию дизайнера.
Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
- Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
- Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
- W3C-метод – используем
@font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
- sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
- 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 отключен – пользователь так же увидит текст шрифта по-умолчанию
491087931
