Домівка > How to (як зробити?), JavaScript, Magento, Video tutorial > Що таке cufón і як його підключити?

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

[tweetmeme source=”magentoua” only_single=false https://magentoua.wordpress.com/2010/04/19/cufon/%5D
cufon
Тривалий час Павутина була наповнена сайтами на яких використовувалися лише стандартні шрифти.

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

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

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

Про cufón

Подібно до 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. Ці елементи дозволяють генерування тексту з шрифтами, які не є стандартними . Зворотньою стороною є те, що не підтримується підсвідка виділеного тексту.

Відео гід

Ось коротке відео яке допоможе зрозуміти що і як підключати:

Відео створене дружнім нам ресурсом maque.org.ua на якому є ще багато відео уроків по Веб і не тільки. І все це українською!

Висновок

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


Сподобалася стаття? Підпишись на RSS або на e-mail розсилку. А ще приєднуйся до нас у Твітері @magentoua.

Вам також буде цікаво прочитати:

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

Advertisements
  1. Коментарів поки що немає.
  1. Травень 3, 2010 о 05:46
  2. Грудень 6, 2010 о 09:52

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: