Дуже давно я не писав на свій блог, а ще мабуть давніше у гілку для веб-дизайнерів. Та щодня стикаєшся з купою маленьких та великих задач, і вирішуючи їх можливо варто було б ділитися з іншими людьми. Ось чи не перша ластівочка. Шрифтова тема.
Мабуть чи не кожен веб-оздобник стикався з темою використання тих чи інших шрифтів, які би однаково відображувалися й існували у всіх без винятку браузерах. Зазвичай, перелік невеликий: Arial, Tahoma, Verdana, Georgia, Geneva, Times New Roman. Це те, що спадає на думку. Я, в основному, використовую Arial.
Але часто хочеться чогось оригінального, бо шрифт, як і дизайн, створює відчуття оригінальності. Малювати у графічному редакторі щоразу, коли виникає потреба змінити напис на сайті, не дуже хочеться. На щастя існують засоби динамічного підключення текстової краси на сайт.
Розкажу про відомі мені прийоми, та недоліки, пов’язані з ними. Відразу зауважу, що подаю лише ті методи, які використовував особисто.
Cufon
Це javascripts-бібліотека, яка дозволяє підключати до сайту оригінальні шрифти, які працюють практично у всіх браузерах за умови дотримання певних вимог до верстки.
Приклад застосування можна бачити на сайті Мамаєвої слободи.
Підключення просте. Спочатку на сайті цього додатку ви генеруєте .js файл на основі .ttf чи .otf шрифта, який завантажуєте зі свого комп’ютера. Далі підключаєте файл бібліотеки і потрібний код в межі <head></head> і вказуєте, якого елемента на сторінці він стосується.
Всі докладні інструкції Ви знайдете на цій сторінці. Там же можна дізнатися про всі можливі хитрощі і прийоми, пов’язані з бібліотекою. Зауважу, що вона повноцінно і коректно працює тільки за умови підключення DOCTYPE Strict на початку коду сторінки. Хто ще не знає, що це таке, раджу поцікавитися.
Що мені не подобається і спонукає шукати інші шляхи? Це те, що згенерований текст не можна вибрати мишею, що він не дозволяє повноцінно використовувати, наприклад, підкреслення. А також виникла нова проблема.
Так як це javascript’івська бібліотека, то вона може не працювати з іншими цікавинками. Як от, я не зміг повноцінно її використовувати у зв’язці з Jquery UI Tabs. Під час ajax-перемикань стилів Cufon не хоче реагувати на зміни.
Хоча не можна не говорити про позитивні сторони. Ця бібліотечка дозволяє створювати градієнтну заливку тексту, підкладати тінь, створювати прозорості, до чого браузери тільки починають доходити.
Font-face
Цей засіб підключення шрифтів останнім часом починають використовувати частіше. Основною його перевагою є те, що ви підключає до браузера повноцінний шрифт, який поводиться не гірше стандартних накреслень.
Основна вада – тяжкість. Якщо до сторінки ви підключаєте повноцінний .ttf-файл разом з його дзеркальними копіями для різних браузерів, то це виходить як мінімум кілька сотень кілобайт. А для розробника, який дбає про “легкість” сайту, то вже, повірте, недолік.
Спробувати готові шрифти можна, до прикладу, з цієї сторінки. У пропонованому коді можна й побачити, як font-face підключається в сторінку.
Шкода тільки, що шрифти здебільшого англомовні, і кириличних символів там не передбачено. Якщо хочете не тільки ковтати слину, а й видозмінити свій сайт, і якщо маєте для того свій .ttf чи .otf, тоді скористайтеся генератором font-face на оцій сторінці.
До того ж, запропонований генератор дозволяє гнучко підлаштувати код під кожен браузер і в ньому також не має виникати серйозних проблем. Як додаток в архів кладеться і компонент вище згаданого Cufon’а.
Google Font API
Google у багатьох сферах тенет перебуває на передових позиціях. Нещодавно розробники цієї компанії втішили шанувальників оригінальних шрифтів нововведенням. На новоствореній сторінці можна з легкістю підключити оригінальний шрифт, вставляючи в сторінку один єдиний рядок на зразок:
1 | <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> |
Далі в css прописуєте щось на зразок:
1 | h1 { font-family: 'Droid Sans', arial, serif; } |
і маєте красу.
На сайт Google Font API вже запропоновано близько 20 шрифтів. Але ви трохи розчаруєтеся, бо побачите, що переважна більшість з них не мовить кирилицею. Єдині шрифти, які розуміють українську – це серія Droid. Хоча можна спробувати інші. Бо, наприклад, в переліку доступних символів Droid Sans немає українських літер, але вони підтримуються.
Все ж, якщо зазирнути в черево пропонованих файлів, то ви трохи втішитеся. Бо ми маємо той же самий font-face, який підключає прямо з Google .ttf файли. Просто форма підключення в сторінку дещо спрощена у порінянні з варіантом вище.
1 2 3 4 5 6 | @font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: normal;
src: local('Droid Serif'), url('http://themes.googleusercontent.com/font?kit=70P0G8gxVDIV6F9om0DsKg') format('truetype');
} |
Отже, використовуючи готовий код, і підключаючи свій ttf шрифт можна підключати на свою сторінку.
Українські шрифти
Не торкнутися цього питання в контексті пропонованої теми не міг, бо якщо поступово виникають можливості підключати оригінальні шрифти, то підключати немає чого. Дуже багато гарних накреслень зроблені тільки для латиниці.
Але навіть якщо взятися їх перемальовувати для української мови, може вийти “не те”, бо питання не лише у повторенні українських літер, а врахуванні власної шрифтової школи і особливостей написання літер.
Тут хочу згадати кількох шрифтовиків, як от Андрія Шевченка (andrijtype) та Генадія Заречнюка (henyk), які творять хороші шрифти. Інше питання, що вони або не адаптовані для вільного використання або не мають відповідних ліцензій.
Єдиний рецепт у цій ситуації – пробувати творити своє. Бо нічого нізвідки не візьметься саме по собі.
Стаття зроблена оглядово. Якщо виникають питання щодо підключень цих бібліотек, не стидайтеся. Є коментарі.
Ключові слова: веб-дизайн, верстка, мова, шрифти
Цікаво, коли Google зробить, і чи зробить взагалі у своїх шрифтах підтримку кирилиці :-\
Наразі вже доступні для придбання кирилічні шрифти з ліцензією на використання з @font-face в шрифтовому магазині FontSpring.com
Дякую, по цей сайт і про платні шрифти знаю.
Тільки там є суттєва вада – немає пошуку і сортування за кирилицею. незручно.
Я використовую @fonr-face, cufon не люблю
Можно и без javascript фреймверков использовать http://cleverscript.ru/index.php/javascript/13-scripts/37-cufon
Посилання на цей допис
Напиши відгук