ДизайнТипографика. Кастомные шрифты.

Ну здравствуйте. Заждались наверное нового выпуска, я вот тоже заждался, но лень, сессия и недуги крепко держали меня в своих объятиях, так что я не мог с вами пообщаться. Но сейчас я этот недостаток исправлю.

Как и обещал, в сегодняшнем номере "Друпал и дизайн" мы поговорим о нестандартных шрифтах, и что с ними делать. А ещё я специально для вас сделал подборочку сайтов, которые выполнены в шрифтовом стиле и служат наглядным примером того, что типографика играет важнейшую роль в дизайне и при большом желании можно обойтись только ею. Но об этом в следующем выпуске, буквально через пару часов.

Но вернёмся к нашим баранам. Допустим возможность возникновения такой ситуации: вы настолько устали юзать стандартные шрифты, что вас просто воротит, или же банально наткнулись на шрифт который бы просто офигенно вписался в ваш дизайн, но боитесь его использовать, потому как это повлечёт с собой трудности его внедрения и доставит нестерпимую боль от гемороя вашему разработчику. Что ж, тут дальнейшие события могут развиваться по-разному, вот возможные варианты:

  • Вы отказываетесь от вашей затеи и используете стандартные шрифты. Возврат к печали и унылости, как грустно, ведь шрифт вам так нравился. Если этот вариант не для вас, и вы готовы пожертвовать временем загрузки (совсем-совсем чуть-чуть), то читайте дальше.
  • Следующим остановочным пунктом становится самое отвратительное быдлоизвращение из всех возможных. Почему тогда я о нём упоминаю? Да чтобы вы так не делали.

    А суть в следующем: открываем псдшку, режем заголовки картинками, немного размываем и вуаля, вставляем и радуемся... недолго. Потому что пользователи с отключенными картинками проклянут вас быстрее чем вы произнесёте словосочетание "квастистационарный трансфункционер континиума". В дополнение к проклятиям с их стороны время загрузки страницы увеличится, и список недоброжелателей увеличится людьми с черепашьим интернетом.

    Ну и чтобы окончательно вас разубедить кромсать заголовки из макета, скажу, что этот способ ещё более трудоёмок чем нижеприведённые. В ТОПКУ.

  • Так, ну а теперь пришло твоё время, метод @font-face. В принципе ничего сложного, и уделять время ему не хочется. Скажу только, что на сегодняшний день в некоторых браузерах метод может работать бажно. Кому нужны подробности милости просим.
  • Перейдём к более оригинальным методам решения нашей проблемы. Рендеринг. Хотел бы уделить особое внимание методу sIFR. Довольно занимательная идея, получившая реализацию в 2003. Воплотил её flash-разработчик Shaun Inman.

    Идея метода достаточно прозрачна: мы просто заменяем необходимый текст на нашей страничке аналогом flash. Алгоритм технологии таков: загружается страничка -> JS определяет наличие Flash плагина -> если оного не обнаружено, то текст будет просто обработан CSSом -> требуемому элементу страницы с помощью JS присваивается класс «.sIFR-hasFlash» -> страничка сканится JSом на наличие объектов класса, заданного выше и сверяет размеры -> в нужных местах создаются Flash-объекты с необходимым контектом и шрифтом, заранее заданным разработчиком. Пока не полетели помидорки хочу заметить, что данный метод полностью отвечает всем стандартам W3C, хоть и обладаем свойственными подобному подходу недостатками(например наличие плагина Flash).

    Кто всё-таки заинтересовался темой - ссылочка в помощь.

  • Ну вот мы и подобрались к "оливье" нашего праздничного стола. Cufon. Что за зверь такой? Если вкратце, то это сервис, который без проблем поможет вам с внедрением нестандартных шрифтов. Нужно подключить всего 2 js файла(1 - генератор стандартного шрифта в нечто промежуточное, и 2 - движок рендеринга на JS) и можно купаться в фонтане радости.

    Да что тут разглагольствовать - просто попробуйте. Вся документация вроде грамотно разбита. Из достоинств отмечу полную поддержку CSS, удобство использования и простоту, а ещё возможность выборочной загрузки символов из шрифта. В общем пробуйте давайте лучше, ведь метод набирает обороты и скоро вы уже не похвастаетесь перед друзьями.

  • Ну и напоследок я оставил очень интересный сервис под названием Typekit. Из преимуществ могу отметить очень удобный интерфейс и очень простое внедрение. Весь процесс занимает не больше 2х минут. Имеется очень большая база шрифтов с возможностью протестировать их все на различных фонах и в любых начертаниях. Для того чтобы это понять, можно просто посмотреть демо.

    Но к несчастью данный сервис коммерческий, в триальной версии есть возможность попробовать все прелести только на одном из ваших сайтов, за продолжение банкета придётся раскошелится, хотя если дела с финансированием проекта обстоят неплохо, то можно побаловаться крутотеньками сервиса.

    Из бесплатных аналогов стоит отметить Google Web Fonts, который на мой взгляд ничем по сути и не уступает.

Вот и все методы, которые на мой взгляд заслуживают внимания. Какой из них выбрать - решать вам (но только не нарезание картинок, умоляю), каждый по-своему хорош, но и недостатками не обделён. Как дела будут развиваться в будущем? А я не знаю, поживём - увидим.

Всем спасибо, все свободны.

Комментарии

Аватар пользователя ice
ice написал:

high-quality-free-fonts может кому полезно будет ,
в целом весь ресурс достаточно интересен )

23.01.2012 22:47
Аватар пользователя Smouk
Smouk написал:

Спасибо, отличный материал. Заюзаю оттуда что-нибудь интересное )

24.01.2012 00:27
Аватар пользователя drupby
drupby написал:

есть еще модуль cufon для drupal

24.01.2012 00:30
Аватар пользователя drupby
drupby написал:

как впрочем и Google Webfont Loader

24.01.2012 00:32
Аватар пользователя drupby
drupby написал:

есть даже и Typekit , хотя куфон ИМХО из них самый интересный .

24.01.2012 00:35
Аватар пользователя vegas
vegas написал:

Огромное спасибо!!! Smouk, ты как всегда очень любезен :) в своих уроках. Я нахожу такие вот обзоры мега полезными! Тем более, что данная статья - это выполнение моей просьбы (ну, или в т.ч. и моей тоже).
Many thanks!

30.01.2012 18:31
Аватар пользователя Smouk
Smouk написал:

Ради счастья других и работаем ) Всегда пожалуйста )

01.02.2012 02:52
Аватар пользователя Smouk
Smouk написал:

Если интересно, то могу ещё подобных подборок сделать и рассказать про стили в дизайне )

01.02.2012 02:53
Аватар пользователя vegas
vegas написал:

Требовать - не имеем права. У вас с Евгением настолько прекрасный стиль изложения (на мой взгляд), что даже того, что вы сделали, уже достаточно (если не рассматривать коммерцию)!
Я не льстю... не лестю... тьфу ты! Короче, не буду льстить :)
На этом сайте еще ни одной НЕполезной статьи не видел (причем, я - не программист!).
Ребята, будет время и желание - конечно же надо писать!!! Дай Бог еще больше здоровья, творчества и оптимизма вашим светлым головам!!!

01.02.2012 04:41
Аватар пользователя Smouk
Smouk написал:

Блин, как приятно слышать такие слова, ты не представляешь! )

01.02.2012 11:16
Аватар пользователя Гость
Гость написал:

А что делать с Oper'ой ?? face-font не работает (если в адресе к папке юзера есть кирилица),
sIFR - я его не проверял, но по описанию он подставляет flash вместо шрифта? т.е. в последней версии opera? где отключен автозапус flash роликов шрифт будет отображаться как кнопка play?
попробую cufon еще. но что-то он меня не впечетляет.
Google Web Fonts - тоже с оперой не дружит. даже превьюшки шрифтов не работают :(

13.02.2012 10:14
Аватар пользователя Smouk
Smouk написал:

Cufon-то юзать и советую. А по поводу Google Web Fonts, очень странно, обычно не допускают таких промашек, может быть не в нём проблема. Попробуй на версиях оперы пониже.

13.02.2012 16:59
Аватар пользователя Spleshka
Spleshka написал:

Cufon кросбраузерный, можете его использовать. Для меня это обычно и является решением проблемы.

13.02.2012 18:52
Аватар пользователя vegas
vegas написал:

Объясните чайнику, пожалуйста:
текст, где изменен шрифт с помощью cufon, трудно выделить для копирования.
Так должно быть? Это нормально?
Собственно, вопрос в том, поисковики нормально воспринимают такой текст?

25.03.2012 18:50
Аватар пользователя Niklan
Niklan написал:

шрифт с помощью cufon, трудно выделить для копирования.
его вообще не скопировать просто так, это картинки
А поисковикам я думаю пофигу, они берут исходный код, а там уже текст а не картинки.

25.03.2012 22:09

Комментировать