Cufon и Typeface.js — это две javascript библиотеки для использования на сайте любых(!) шрифтов (аналоги sIFR), использующих для отображения canvas и VML. В чем же между ними отличия? И какая из них лучше?

Принципы работы

Cufon и Typeface.js конвертируют нестандартный шрифт в свой внутренний формат и потом отображают его с помощью canvas в современных браузерах и VML в Internet Explorer’е. Плюсы такого подхода в том, что нет нужды в плагине для отображения флеш! По сравнению с sIFR, мы получаем большую скорость и гарантию работоспособности на всех компьютерах.

ТТХ

Генерирование шрифтов

Обе библиотеки имеют удобные онлайн-конвертеры шрифтов:
* конвертер для Cufon
* конвертер для Typeface.js
Загружаете свой шрифт, выбираете необходимые группы символов (верхнийнижний регистр, цифры, спецсимволы и т.п.), а на выходе получаете готовый .js файл. Typeface.js поддерживает только TrueType (.ttf) шрифты. Cufón — OpenType (.otf), Printer Font Binary и postscript. Жаль, что конвертер Typeface.js имеет встроенную проверку лицензии и откажется конвертировать запрещённый к распространению шрифт.
Вопрос о выборе групп символов Typeface.js задаст только посе загрузки шрифта. Cufon же позволяет задать все опции сразу на одной страничке, плюс имеет возможность включить полужирный и курсивный варианты в конечный файл. Кроме того(!), позволяет ограничить использование на определённых доменах и указать качество шрифта.

Вставка на сайт

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

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

Typeface.js работат немного по-другому. Он автоматически заменяет все заголовки, в стилях которых указано имя нашего шрифта (например «optimer»):

h1,  h2 {
  font-family:optimer;
}

Остальным же элементам необходимо дополнительно установить класс typeface-js:

<div class="myclass typeface-js">
...
</div>

Internet Explorer 7

В данном браузере есть проблема. Из-за задержки в пару миллисекунд происходит мерцание текста. Прекратить это безобразие легко. Необходимо перед закрывающем тегом добавить код:
Cufon:

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

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Лицом к лицу

Перейдём к демо страничке и посмотрим две библиотеки в работе. Как Вы можете заметить — есть отличия в отступах, особенно при изменении размера шрифта. На этом фоне Cufón в более выгодной позиции.

Вердикт

Что же лучше? Cufón или Typeface.js? По функционалу разница небольшая: Cufon поддерживает больше типов шрифтов, Typeface.js — больше CSS свойств. Typeface.js проще в использовании, Cufon меньше и имеет правильные отступы.
Итак, использование Cufon’a предпочтительней, но конечного победителя нет. Это означает, что будет лучшим тот, кто первым реализует поддержку выделения текста! :)

Оригинал статьи: Cufon vs. Typeface.js, which one is better?

Понравилась статья? Поделись с другими:

• 

Похожие статьи:

1. 8 CSS групп шрифтов для вебдизайна