Привіт. Нарешті дістався до теми, яка мене вже давно цікавила. Сьогодні у своєму видиві я покажу, як працювати з cufon. А саме як його застосувати у простому HTML файлі. Він (тобто куфон) стає у нагоді, коли потрібно використати з естетичних міркувань певний нестандартний шрифт у сайті.
Рівень: початківець
Тривалість: 04 хв 56 с
Відео на YouTube можна дивитись у HD якості. Як саме.
Також можна завантажити це відео з YouTube.com на власний комп’ютер. Як завантажити відео з YouTube.com на власний ПК
Завантажити усі використані у відеоуроці файли (125 КБ)
Нотатки до відеоуроку
- Створюємо новий HTML документ, у якому хочете застосувати cufon, або відкриваєте той, до якого хочете додати cufon;
- На Віндовз спочатку треба шрифт, який хочете використовувати, скопіювати кудись з директорії “Fonts” (скажімо на робочий стіл чи деінде);
- Завантажуємо скрипт за цим посиланням (правою клавішею миші на кнопці “Download” та «Зберегти посилання як») до теки, з Вашим HTML файлом, де хочете застосувати cufon;
- Йдемо до сайту http://cufon.shoqolate.com
- Вибираємо потрібний шрифт (зараз підтримуються такі шрифтові формати TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) та PostScript);
- Ставимо галочку біля “The EULAs of these fonts allow Web Embedding (without Adobe Flash)”;
- У опції “Include the following glyphs (if available)” ставимо галочку біля “Basic Latin” (для основних символів латинки) та Cyrillic Alphabet (для кириличної абетки). До речі, не завадить перевірити, чи підтримує Ваш шрифт українську. У іншому разі український текст просто не відтворюватиметься;
- Залишивши решту налаштувань за промовчанням, ставимо галочку біля “I acknowledge and accept these terms” (Усвідомлюю та приймаю умови);
- Тицяємо на “Let’s do it!” (Зробімо це);
- Зберігаємо файл до тієї теки, де розміщено HTML файл, у якому хочете застосувати cufon;
- Відкриваємо цей файл за допомогою, скажімо, Дримвівера та між мітками (теґами) <head> та </head> вставляємо таке:
<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”Book_Antiqua_400.font.js” type=”text/javascript”></script>
<script type=”text/javascript”>Cufon.replace(’h1′);</script><script src=”cufon-yui.js” type=”text/javascript”></script> – імпортує js файл, який завантажили з http://cufon.shoqolate.com/generate/
<script src=”Book_Antiqua_400.font.js” type=”text/javascript”></script> – вказує, який шрифт будемо використовувати. Замість Ви маєте вставити назву Вашого файлу, що було щойно згенеровано
<script type=”text/javascript”>Cufon.replace(’h1′);</script> – вказуємо, до якої мітки це застосувати (куфон дозволяє як селектори використовувати стандартні мітки для тексту <p>, <h1>, <h2> тощо)
- Пишемо якийсь текст, який розташовуємо між <h1> та </h1>;
- Зберігаємо файл та переглядаємо його у браузері.
Корисні посилання:
1.Що таке cufón і як його підключити?
2.Five Easy Steps to Getting Started with Cufón
3.Replacing Fonts Using Cufon
Завантаження ...
не знайшов згадку в статті про плаґін… тому може буде цікаво – у мене стоїть плаґін “WP-Cufón”. дозволяє користувачам вордпресу легко встановити на свій сайт шрифти, обминаючи всі ці функції, які описані в статті. ну, не кожен розуміється в такому)
зразу дам лінк на плаґін у директорії вп: http://wordpress.org/extend/plugins/wp-cufon/
плаґін три дні тому оновлений
Дякую. Плаґін зацікавив. Не знав про його існування.
додай add-on, а то коментарі не кожен читає) наприклад, такі як я
Що саме за додаток у тебе на думці?
[...] Вітаю. Хочу подякувати Не Кіт за ідею для сьогоднішнього відеоуроку (дивіться коменти до допису Як працювати з cufon). [...]
[...] 1.Як працювати з cufon 2.Як експортувати базу даних через phpMyAdmin 3.Як встановити Magento на AppServ (localhost) 4.Проблеми з інсталяцією Magento на AppServ 5.Як встановити плаґін WP-Cufón 6.Як створити мультипрогравач видива у Флеш ( I ) 7.Як встановити форум phpBB3 (укр. інтерфейс) 8.Як оновити версію ВП (Wordpress) вручну 9.Як під’єднатися до FTP-сервера (FileZilla) 10.Як розмістити флеш-банер у Джумлі (Joomla) 11.Screenpresso (Adobe AIR застосунки) 12.Швидка зміна розміру зображення у Shrink O’Matic 13.Як додати звук у Флеш 14.Як прикріпити маску до курсора у Флеш [...]