Cufón – використовуйте шрифти, які душа забажає

cufon

Якщо стоїть завдання використати у проекті нестандартний шрифт, то є можливість піти кількома шляхами:

  1. Ъ-метод – не використовувати нестандартні шрифти, достатньо вCSS сказати тіла {font-family: sans-serif;} і не морочити собі голову.
  2. Бидло-метод – нарізати з ЖПЕГом, картинок із заголовками, стиснути сильніше, що б з’явилася розмитість і вставляти замість тексту картинки. Досить популярний на наших теренах метод.
  3. W3C-метод – використовуємо @font-family і насолоджуємося красивими шрифтами без всяких проблем. Поки цей метод не розглядають, як робочий,через слабку підтримай з боку браузера.
  4. sIFR – кльова річ, найбільш вживана на сьогоднішній день, але як недолік – вимагає наявності Flash-плагіна. Хоча це важко назвати недоліком, але якщо є інструмент, що дозволяє обійтися без плагінів, то це не може не радувати.
  5. Cufón – саме те. Відносно новий метод, який показує чудові результати. Він і є герой цієї статті.
  6. typefaces.js – ще один спосіб, практично повний аналог куфона, але сьогодні ми будемо говорити не про нього.

Що за куфон?

Як пишуть на сайті розробники – покликання їхнього проекту стати гідною альтернативою для sIFR, який незважаючи на всі свої заслуги все ж декілька складний в налаштуванні і використанні. Для досягнення цього булипоставлені такі цілі:

  1. Не вимагати плагінів – використовуються тільки ресурси, типові підтримувані браузером (з цих ресурсів, використовуються JavaScript, SVG і  для нормальних, VML для IE)
  2. Сумісність – повинен працювати в усіх поширених браузерах.
  3. Простота використання – мінімум приготувань і конфігурації.
  4. Швидкість – вона повинна бути досить великою, навіть для об’ємних текстів.

Як працює

Cufón складається з двох незалежних частин – генератора шрифту, який перетворює стандартний шрифт (в форматах, TTF, OTF) в певний проміжний формат, який буде використовуватися далі. Друга частина – движок рендерінга на JavaScript.

Все зроблено дуже хитро і продумано, але в підсумку, для роботи все цієї машинерії від вас вимагається підключити всього два JavaScript файлу і можна насолоджуватися шрифтом.

Спробуємо

Спробуємо все це на ділі. Для початку візьмемо файл зі шрифтом, у мене є для прикладу шрифт Mars, в звичайному і жирному накресленні. Йдемо за адресою cufon.shoqolate.com/generate/ і пхає в форму наявні у нас файли. Далі, за бажанням, відзначаємо якісь додаткові настройки і отримуємо файл, в моєму випадку це був Mars_400-Mars_700.font.js Назва нам показується, що файл містить наш шрифт в двох накресленнях, наочно, але якось довго таке в тег скрипт прописувати …

Наступним кроком буде скачування власне дистрибутива Cufón, який устислому вигляді займає якихось 14 КБ. cufon.shoqolate.com/js/cufon-yui.js

Підключаємо обидва цих файлу в наш документ, як самий звичайний JavaScript.

 

Тепер вибираємо, які саме елементи сторінки ми хочемо промальовувати нашим красивим шрифтом. Для прикладу всі заголовки H1, немає проблем:



Та й це все, що від нас вимагається. Колір, розмір та інші параметри для промальовування беруться з CSS. Якщо вони звичайно задані.

Якщо ми хочемо заміняти не тільки H1, але і які небудь

< li.active>, то нам буде потрібно стороння бібліотека, яка вміє робити вибірку поселекторів. Справа в тому, що зараз мало хто обходиться без таких JavaScript бібліотек, як Prototype, jQuery, MooTools або Dojo, а тому творці вирішили не робити свою бібліотечку надлишкової і пропонують нам скористатися сторонньою. Правильно пропонують! Отже, при використанні однієї з вищенаведених бібліотек, нам просто треба підключати їх вдокументі раніше ніж Cufón, тоді він сам розбереться що до чого і можна починати використовувати більш складні запити.

Особлива замітка для людей, які дбають про користувачів IE. Розробники рекомендують вставляти наступний код, відразу перед , або перед викликом будь-якого зовнішнього скрипта, наприклад Google Analytics:



Це повинно позбавити IE від деякої затримки в промальовуванні шрифтів.

Використання декількох шрифтів.






Якщо не вказати додаткових налаштувань при виклику, то буде використаний останній завантажений шрифт (Mars_Pro_400).

І ще всі сторінки, де використовується Cufón – повинні бути в кодуванні UTF-8, або назад сумісні з нею, наприклад US-ASCII. А якщо ваші сторінки все ще в CP1251 – ваші проблеми(в мене працює).

Тонкощі

Якщо при виклику рендера ми хочемо вказати для тексту якісь додаткові візуальні налаштування, то це слід робити так:

Cufon.replace("ul.menu li.active a", {color:'#000000'});

Це може знадобиться наприклад в наступному випадку:

Cufon.replace("ul.menu li a");

Cufon.replace("ul.menu li.active a", {color:'#000000'});

При виклик першого рендерера, Cufón правильно визначить колір для всіх посилань у меню, відповідно до правил CSS, однак він не буде ходити далі і з’ясовувати, чи є у нас далі якісь відмінності, тому одна з посилань може бути показана білим кольором на білому тлі . Для виправлення подібної ситуації і служить виклик другого рендерера.

Подібним чином можна прописувати не лише колір, а й практично всі властивості CSS, пов’язані з тексту. Крім того, є можливість заповнити текст градієнтом, але це незрозуміло навіщо потрібно, а кому дуже вже хочеться,відсилаю до сторінки керівництва, де це добре описано. wiki.github.com/sorccu/cufon/styling

Ще варто звернути увагу на той момент, що заміна шрифтів відбувається тільки в момент виклику рендерера:

Справить заміну для всіх елементів h1 з класом “alala”, якщо ви в подальшому за допомогою скрипта присвоєно клас “alala”, для іншого h1, то там заміна тексту не станеться! Так що не забувайте після маніпуляцій виробляти виклик рендерера.

Сторінка проекту на github
Документація по частині візуального офрмлення за допомогою CSS
Генератор шрифтового файлу

Джерело http://habrahabr.ru/post/61033/

Напишіть відгук

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *