Programmer Weekdays

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

Так как мы можем использовать сторонний шрифт на сайте?

• Уговорить себя/заказчика/дизайнера не использовать сторонние шрифты вообще 🙂
• Поступать как индусы и нарезать Jpeg картинок. Так уже не делает никто за исключением отъявленных индусов.
• CSS3, лично я пока отвергаю его т.к. он поддерживается слабо да и не всеми браузерами.
• sIFR, хорошая вещь, но требует наличия Flash плагина.
• Cufon, вот это по мне.

Cufon, Cufon… Cufon?

Какие плюсы у него есть и почему я его так люблю:

1. Не требует каких либо плагинов — используются только средства, нативно поддерживаемые браузером.
2. Совместим со всеми распространенными  браузерами.
3. Простота использования, все понятно и красиво.
4. Быстро работает даже при большом количестве текстов.
5. Прекрасно индексируется как и обычный текст.

Как же ты устроен?

Cufon состоит из генератора шрифта ( который преобразует шрифты в форматах TTF и OTF в промежуточный формат используемый далее ) и движка рендеринга на JavaScript.

Разработчики потрудились на славу и для работы требуется подключить всего 2 файла JavaScript.

Test, test, test…

Пора показать работу Cufon’а во всей красе. Берем любой шрифт и идем на http://cufon.shoqolate.com/generate/ загружаем туда наш шрифт и указываем что нам от него надо, от выбранных пунктов будет зависеть размер выходного файла, поэтому советую выбирать только необходимые пункты. Жмем кнопочку и получаем обработанный файл «имя_шрифта.js». А теперь нам нужно скачать сам дистрибутив Cufon’а, идем по адресу http://cufon.shoqolate.com/js/cufon-yui.js.

В страницы подключаем наш шрифт :

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

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

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

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

Вы все еще печетесь о пользователях IE? Тогда разработчики рекомендуют вставлять следующий код, сразу перед , либо перед вызовом любого внешнего скрипта.

<script type="text/javascript"> Cufon.now(); </script>

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

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

Удачи в ваших экспериментах 😉