Cufon чи font-face? Шрифти веб-розробника

Bohdan — Mon, 24 May 2010 18:01:52 +0000

Дуже давно я не писав на свій блог, а ще мабуть давніше у гілку для веб-дизайнерів. Та щодня стикаєшся з купою маленьких та великих задач, і вирішуючи їх можливо варто було б ділитися з іншими людьми. Ось чи не перша ластівочка. Шрифтова тема.

Мабуть чи не кожен веб-оздобник стикався з темою використання тих чи інших шрифтів, які би однаково відображувалися й існували у всіх без винятку браузерах. Зазвичай, перелік невеликий: Arial, Tahoma, Verdana, Georgia, Geneva, Times New Roman. Це те, що спадає на думку. Я, в основному, використовую Arial.

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

Розкажу про відомі мені прийоми, та недоліки, пов'язані з ними. Відразу зауважу, що подаю лише ті методи, які використовував особисто.

Cufon

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

Приклад застосування можна бачити на сайті Мамаєвої слободи.

Підключення просте. Спочатку на сайті цього додатку ви генеруєте .js файл на основі .ttf чи .otf шрифта, який завантажуєте зі свого комп'ютера. Далі підключаєте файл бібліотеки і потрібний код в межі і вказуєте, якого елемента на сторінці він стосується.

Всі докладні інструкції Ви знайдете на цій сторінці. Там же можна дізнатися про всі можливі хитрощі і прийоми, пов'язані з бібліотекою. Зауважу, що вона повноцінно і коректно працює тільки за умови підключення DOCTYPE Strict на початку коду сторінки. Хто ще не знає, що це таке, раджу поцікавитися.

Що мені не подобається і спонукає шукати інші шляхи? Це те, що згенерований текст не можна вибрати мишею, що він не дозволяє повноцінно використовувати, наприклад, підкреслення. А також виникла нова проблема.

Так як це javascript'івська бібліотека, то вона може не працювати з іншими цікавинками. Як от, я не зміг повноцінно її використовувати у зв'язці з Jquery UI Tabs. Під час ajax-перемикань стилів Cufon не хоче реагувати на зміни.

Хоча не можна не говорити про позитивні сторони. Ця бібліотечка дозволяє створювати градієнтну заливку тексту, підкладати тінь, створювати прозорості, до чого браузери тільки починають доходити.

Font-face

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

Основна вада — тяжкість. Якщо до сторінки ви підключаєте повноцінний .ttf-файл разом з його дзеркальними копіями для різних браузерів, то це виходить як мінімум кілька сотень кілобайт. А для розробника, який дбає про «легкість» сайту, то вже, повірте, недолік.

Спробувати готові шрифти можна, до прикладу, з цієї сторінки. У пропонованому коді можна й побачити, як font-face підключається в сторінку.

Шкода тільки, що шрифти здебільшого англомовні, і кириличних символів там не передбачено. Якщо хочете не тільки ковтати слину, а й видозмінити свій сайт, і якщо маєте для того свій .ttf чи .otf, тоді скористайтеся генератором font-face на оцій сторінці.

До того ж, запропонований генератор дозволяє гнучко підлаштувати код під кожен браузер і в ньому також не має виникати серйозних проблем. Як додаток в архів кладеться і компонент вище згаданого Cufon'а.

Google Font API

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

Далі в css прописуєте щось на зразок:

1	h1 { font-family: 'Droid Sans', arial, serif; }

і маєте красу.

На сайт Google Font API вже запропоновано близько 20 шрифтів. Але ви трохи розчаруєтеся, бо побачите, що переважна більшість з них не мовить кирилицею. Єдині шрифти, які розуміють українську — це серія Droid. Хоча можна спробувати інші. Бо, наприклад, в переліку доступних символів Droid Sans немає українських літер, але вони підтримуються.

Все ж, якщо зазирнути в черево пропонованих файлів, то ви трохи втішитеся. Бо ми маємо той же самий font-face, який підключає прямо з Google .ttf файли. Просто форма підключення в сторінку дещо спрощена у порінянні з варіантом вище.

@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), які творять хороші шрифти. Інше питання, що вони або не адаптовані для вільного використання або не мають відповідних ліцензій.

Єдиний рецепт у цій ситуації — пробувати творити своє. Бо нічого нізвідки не візьметься саме по собі.

Стаття зроблена оглядово. Якщо виникають питання щодо підключень цих бібліотек, не стидайтеся. Є коментарі.

div vs table: проблема з колонками

Bohdan — Sun, 25 Jan 2009 01:29:08 +0000

Порада для програмерів-верстальників. Як позбутися проблеми з перескакуванням при різновисоких колонках у div.верстці...
При верстці таблицями цієї проблеми не виникало:

Цей код давав нам змогу мати те, що ми намагаємося добитися div'ами.

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

div'и дозволяють це зробити шляхом створення однакових за шириною блоків:

Але!!! Якщо один з блоків має задовгий текст, то станеться отаке:

Донедавна я не міг вирішити проблему. Навіть головна сторінка мого сайту ~~має~~ мала таку ваду... Коли текст завеликий, то він вилазив за межі блоку. Бо я, остерігаючись, що блок не перескочив, примусово йому присвоїв певну висоту. Це незручно, бо не можна довший текст додати до вступу...

Сьогодні знайшов вирішення.

Все дуже просто... Для того, щоб четвертий блок починався з нового рядка не зважаючи ні на що, ми обрубуємо обтікання третього останнього блоку і примусово вказуємо четвертому початися з нового рядка:

Ніби все правильно. Якщо не так — підправте.