Шрифти - де взяти, як вмонтувати |
|||
03.11.2012 в 02:00 | NARDO | Теги: шрифти, Google Web Fonts, Fonts, Google, Cufon |
|||
|
Tweet |
Будь який Ваш проект, чи то сайт, презентація або стильна візитка має у своєму складі різний текст. При цьому стиль тексту має величезне значення - він може, як прикрашати загальну композицію, вносячи в неї гармонію, так і внести дисбаланс своїм незграбним або непоєднуваним виглядом. Тому підбір шрифту найчастіше носить довготривалих характер. Також проблемою є те, що розробка нового шрифту, як правило, дуже трудомісткий процес, відповідно знайти легально якісний та красивий шрифт доволі проблематично. На просторах інтернету існує повно ресурсів які пропонують скачати різні шрифти, але от на скільки вони легальні для використання - це питання відкрите. Але вихід є завжди - в мережі є прекрасний сайт з легальним вмістом у вигляді величезної збірки різних шрифтів.
Представляю Вам один з найстаріших ресурсів присвячений різним шрифтам - Dafont.com
Його база містить більше ніж 16000 різних дуже якісних шрифтів. Підбірка постійно оновлюється.
Для навігації по сайту на головній сторінці представлений зручний класифікатор, що дозволяє швидко визначитися з яким типом шрифту ви хочете працювати.
Величезною перевагою ресурсу є наявність більше 50 кірілістіческіх шрифтів, що робить особливо актуальним даний ресурс для нашого регіону.
Завдяки меню опцій ви не тільки можете вписати текст для попереднього перегляду, але й вибрати кількість відображуваних шрифтів на сторінці, їх розмір, тип шрифтів, можливість перегляду всіх варіантів одного шрифту та багато іншого.
Також є можливість сортувати шрифти, як за популярністю, назвою, так і за датою додавання.
Ви звичайно можете знайти ще не один десяток ресурсів з різними добірками шрифтів, але як правило вони уявляють із себе суцільний плагіат, ще й вимагають постійного моніторингу нових надходжень, тут таки усе на очах, а головне абсолютно легально!
Для презентацій та різних графічних рішень Dafont.com це звичайно вихід, але як бути з різними сайтами та веб-додатками? Звичайно, при створенні сайту ви можете використовувати будь-який вподобаний Вам шрифт, але де гарантія, що вони встановлені у кінцевого користувача? Адже стандартний набір шрифтів підтримуваних будь-яким браузером досить убогий - Arial, Verdana, Times New Roman, Georgia, Trebuchet MS, Courier New, Comic Sans MS. До недавнього часу ця проблема була досить гострою, але з появою унікального сервісу від Google, багато веб-дизайнерів змогли добряче полегшити собі життя. Представляємо Вашій увазі Google Web Fonts - унікальний сервіс який дає можливість вставляти різні шрифти на Ваш сайт за допомогою JavaScript.
На сьогодні ресурс містить більше 500 різних шрифтів, і це не межа - постійно йде поповнення новими надходженнями. Також не забули й про кирилицю – таких шрифтів звичайно не так багато як хотілося б, не більше 40, але це краще ніж нічого.
Сайт Google Web Fonts містить велику кількість різних фільтрів які допомагають відсортувати шрифти за необхідних саме Вам параметрів.
Також сайт має можливість попереднього перегляду обраної підбірки різних шрифтів, для зручності користувачів реалізована функція введення необхідного Вам тексту для оцінки його зовнішнього вигляду. При цьому Ви можете змінювати розмір шрифту, сортувати шрифти за популярністю, датою та іншими параметрами.
Обраний вами шрифт буде доступний для використання у розділі Quick Use.
Quick Use, представлено 4-ма пунктами:
1. Вибір стилю шрифту та оцінка його швидкості завантаження.
2. Вибір типу набору символів.
3. Вибір варіанту коду для вставки до вашого сайту.
4. Код для вставки до вашої таблиці стилів.
Величезною перевагою такого типу роботи з шрифтами є швидкість завантаження - шрифти завантажуються з серверів Google, не навантажуючи ваш особистий веб-хостинг, та й стабільність серверів пошукового гіганта як правило вище звичайного хостингу.
Крім даного способу Ви також можете завантажити необхідні Вам шрифти у форматі .ttf натиснувши на кнопку «Download your Collection», але перед цим не забудьте додати їх у Колекцію за допомогою кнопки «Add to Collection».
Онлайн сервіс Google Web Fonts не стоїть на місці - завдяки абсолютно безкоштовній вільній ліцензії, що дає можливість вбудовувати набір шрифтів від Google у будь-який веб-проект та універсальної кросбраузерності, даний сервіс отримав величезне поширення серед веб-розробників, що безсумнівно дає можливість сервісу динамічно розвиватися та поповнюватися новими різними шрифтами.
Якщо серед перелічених вище двох проектів Ви не знайшли те що шукали, чи у Вас вже є підібраний шрифт у Dafont.com але він відсутній у Google Web Fonts не засмучуйтесь, є ще один чарівний спосіб для додавання будь-якого шрифту до сайту!
Пропоную до Вашої уваги javascript плагин Cufon. Його робота заснована на перетворенні будь-якого шрифту у SVG або VML об'єкт. Розглянемо докладніше що це. Для інтеграції красивого шрифту до сайту раніше дизайнери використовували його вставку у вигляді зображень. Модуль Cufon пвласне робить теж саме тільки за допомогою JavaScript - у браузерах що підтримують SVG відтворює шрифт у вигляді даних елементів, у інших браузерах які не підтримують це рішення застосовується технологія VML - шрифт перетворюється на графічну картинку за допомогою JavaScript.
Плагін звичайно не ідеальний, у нього є істотні недоліки - неможливо скопіювати та виділити текст, не завжди коректно працює з великими обсягами тексту, сповільнена реакції скрипта - до того як він завантажиться та обробить текст користувач побачить стандартний шрифт. Незважаючи на це на сьогодні це одне з найкращих рішень завдяки кросбраузерності, простоті застосування та можливості редагування тексту стандартними інструментами із застосуванням звичайних параметрів шрифту, підтримці класів hover, text-shadow, можливості захисту від копіювання.
Варто відзначити також невелику вагу бібліотек скрипта, завдяки чому швидкість завантаження сайту практично не зміниться.
Для роботи з плагіном необхідно скачати JavaScript бібліотеку cufon-yui.js.
Надалі нам необхідно створити шрифт за допомогою Generator. Для початку завантажуємо фали з доступними шрифтами (підтримуються розширення.TTF, .OTF, .PFB).
Далі виставляємо необхідні опції такі як тип шрифту, обмеження використанням іншими доменами тп.
У підсумку ви отримаєте файл розширенням .js котрий необхідно буде вмонтувати до Вашого сайту разом з бібліотекою cufon-yui.js.
Приклад (додайте перед тегом що закривається </head>)
Даний плагін має стандартні опції та методи запуску наведені у таблицях нижче які взяті з сайту xiper.net.
Методи запуску плагіна
Методы запуску |
задає опції шрифту |
Cufon.set(option, value) |
Cufon.set("fontFamily", "Amaze") |
replace |
замінює звичайний шрифт на вказаний |
Cufon.replace(selector[, options]) |
Cufon.replace('h1')('h2'); |
now |
команда для початку заміни тексту Cufonом. Іноді потрібно для IE, щоб заміна почала відбуватися після повного завантаження DOM струкутри |
Cufon.now() |
|
refresh |
оновлює зазначений селектор. Потрібно для динамично згенерованого / зміненого контенту |
Cufon.refresh([selector, ..]) |
Cufon.refresh |
Опції плагина
Опція |
Опис |
Можливі значенняя |
За замовчуванням |
autoDetect |
Якщо встановлений true, ім'я шрифту береться з CSS властивості font-family (не працює у Opera) |
true, false |
false |
color |
Колір тексту. Значення береться з CSS властивості color, якщо не використовується градієнт |
"red", "#f62315", .. |
з CSS |
fontFamily |
Ім'я шрифту, який буде застосований |
Ім'я будь-якого завантаженого шрифту |
Останній завантажений шрифт |
fontSize |
Розмір шрифту. Якщо не заданий у опціях, береться з CSS (font-size). Доступні значення тільки у px. |
"14px", "24px", "72px", .. |
из CSS |
fontStretch |
Ширина символів. Якщо не заданий у опціях, береться з CSS (font-stretch). |
"160%", "condensed", "semi-expanded", .. |
"normal" |
fontStyle |
Стиль шрифту. Якщо не заданий у скрипті, береться з CSS властивості font-style |
"normal", "italic", "oblique" |
з CSS |
fontWeight |
Жирність шрифту. Якщо не заданий вочевидь у скрипті, береться з CSS властивості font-weight |
100-900, "normal", "bold" |
з CSS |
forceHitArea |
Фіксує клікабільную область елементу для IE. (якщо у елемента, до якого застосований Cufon, задано фонове зображення, за замовчуванням у IE стають неклікабільнимі прозорі ділянки - то що не зображення літер) |
true, false |
false |
hover |
Чи включати підтримку: hover. Можна так само вочевидь вказати як реагувати на наведення (тип значення Object) |
true, false, Object |
false |
hoverables |
Визначає які теги будуть реагувати на: hover (у IE6 застосовується тільки до посилань) |
{ tag: true, .. } |
{ a: true } |
letterSpacing |
Відстань між буквами. Якщо не задано вочевидь у скрипті, береться з CSS властивості letter-spacing |
"-1px", .. |
Из CSS |
separate |
Як переноситься багаторядковий текст. |
"words" - слів не розривати, "none" - не переносити на другий рядок, "characters" - слова можна розривати |
"words" |
textShadow |
Відображає тінь тексту. Якщо не задано вочевидь у скрипті, береться з CSS властивості text-shadow |
"1px 1px #000", .. |
"none" |
textTransform |
Перетворення тексту. Якщо не задано вочевидь у скрипті, береться з CSS властивості text-transform |
"uppercase", "lowercase", "capitalize", "none" |
из CSS |
trim |
Якось впливає на суміжні прогалини й переноси рядків. Толком не зрозумів, потрібно тестувати. |
"simple", "advanced" |
"simple" |
Як Ви бачите використання стильних та нестандартних шрифтів при розробці сайту стало просто як ніколи. Та й веб-технології не стоять на місці, пропонуючи нам все більше творчої свободи при реалізації різних задумок. Сподіваюся Ви почерпнули щось нове для себе! Зважуйтесь на більше!
comments powered by Disqus