Що таке cufón і як його підключити?

cufon

Тривалий час Павутина була наповнена сайтами на яких використовувалися лише стандартні шрифти.

Незадоволені цією відсутністю різноманітності, група розробників винайшла sIFR, який використовує Javascript і Flash, щоб замінити нудний текст на текст зі цікавими та оригінальними шрифтами. Але sIFR мав проблему: не усі люблять або використовують Flash. Також він є досить повільним.

Потім Давід Честер створив typeface.js. Typeface.js працював чудово, він використовував виключно Javascript, без Flash. Але typeface.js був повільний і для завантаження вимагав файли значного розміру.

І зовсім недавно з'явився cufón від Simo Kinnunen, який ми тут і розглянемо.

Про

Подібно до typeface.js, cufón – чистий Javascript, що означає, що ви уникаєте всіх проблем Flash. Повний розмір cufón - ~26kb, у той час як файл для стиснений за допомогою YUI, - 14kb. Він підтримується більшістю сучасних браузерів, у тому числі і Internet Explorer 6 (хай спочиває в мирі).

Одна з найбільших переваг cufón - його неймовірна швидкість. До цього масова заміна великих об'ємів тексту була дуже непрактичною, оскільки як sIFR, так і typeface.js витрачали багато часу на свою магію. Cufón у свою чергу перетворює величезні блоки у два рази швидше за своїх попередників. Ви можете подивитися demo, в якому cufón замінив декілька середніх і довгих параграфів.

Використання

Використання cufón дуже просте. Спершу, ви завантажуєте core Javascript file. Потім, ви генеруєте Javascript файл вашого шрифту шляхом заватаження його на спеціальній формі. Ваш шрифт може бути в наступних форматах: TrueType (ttf), OpenType (otf), Printer Font Binary (PFB), or PostScript (ps). Згодом, ви можете вибрати, які гліфи ви бажаєте включати у файлі Javascript. Згенеровані файли зазвичай мають розмір близько 20-25kb, якщо використовуються тільки основні гліфи. Якщо ж гліфів більше, то розмір зростає до 40kb і більше.

Порівняйте цей процес з sIFR, який вимагає, щоб ви перетворили шрифт на flash movie. Що займає більше часу, ніж необхідно. sIFR також завантажує шрифт кожного разу для різних секцій заміненого тексту, збільшуючи час завантаження сторінки. typeface.js, подібно до cufón, використовує Javacript файл шрифту, але його розмір більший і зазвичай стартує від 60kb.

Після генерування файлу шрифту, ви просто імпортуєте як cufón, так і Javascript файли вашого шрифту:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Vash_Font_400.font.js"></script>

В Magento ми копіюємо ці файли в папку js/cufon/ і підключаємо їх у файлі page.xml за допомогою методу AddJS:

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>cufon/cufon.js</script></action>
<action method="addJs"><script>cufon/Vash_Font_400.font.js</script></action>
</block>

Після цього, ви звертаєтеся до cufón, щоб замінити ваш бажаний селектор:

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

Якщо ви маєте бібліотеку Javascript або фреймворк на зразок jQuery, cufón може скористатися його селекторами. Наприклад, якщо ви підключили jQuery, ви можете зробити:

<script type="text/javascript">
Cufon.replace('#cufon p, .someclass span');
</script>

Cufón також підтримує підключення декількох шрифтів. Наприклад, ви хотіли, щоб їх h1 мав шрифт ABC, а ваш параграф, щоб мав шрифт XYZ. Ви робите наступне:

<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'ABC' }); /*шрифт ABC для H1*/
Cufon.replace('p', { fontFamily: 'XYZ' }); /*шрифт XYZ для p*/
</script>

В Magento ці звертання робимо в файлі: app/design/frontend/your_package/your_theme/template/page/html/head.phtml
Слід зазначити, що назву шрифту(ABC чи XYZ) ви задаєте під час генерації його Javascript файлу.

Яке це працює

Cufón використовує Javascript файл шрифту, що містить картографії символів шрифту. Під час виклику він замінює вміст вказаного елементу(s) елементом canvas в сучасних браузерах, і VML в Internet Explorer. Ці елементи дозволяють генерування тексту з шрифтами, які не є стандартними . Зворотньою стороною є те, що не підтримується підсвідка виділеного тексту.

Висновок

Cufón дуже класний, маленький і швидкий. Він працює у більшості браузерів і підтримує одночасне використання різних шрифтів. Проте ще не підтримується підсвідка виділеного тексту. Загалом cufón є досить хорошим і дуже зручний у використанні. Надіємось з часом він тільки удосконалюватиметься.
Йдіть та спробуйте cufón. Думаю, що ви будете ним приємно здивовані так як був здивований я. Якщо ж у вас є якісь застереження чи поради – прошу вільно висловлюватися у коментарях.

коментарі:

Мирослав 22.04.2010 16:11
а неможливість виділити текст це побічний ефект роботи скрипта? Протестував в своїй Убунті і ХР (на віртуальній машині).
magentoua 22.04.2010 16:26
так. покищо ця функція на жаль не реалізована
+1someverystrangeguy 25.04.2010 08:06
іноді це не баг, а фіча
Мирослав 27.04.2010 15:10
Це добре, але якщо воно конфігурується. А так, це швидше дратуватиме користувача ніж кидатиме його в захват.
meako 28.04.2010 09:02
Неможливість виділення тексту нівелює всю корисність скрипта.
З подібним успіхом можна генерувати картинки.

Дочекаємось вже мабуть @font-face

додати коментар: