вторник, 5 января 2010 г.

Красивые и нестандартные шрифты на HTML страницах? Это очень просто!


Довольно часто, при разработке сайтов, его заказчики выдвигают завышенные требования к его дизайну (красивое анимированное меню на базе флэш технологий, графические заголовки и все-такое), что в последствии приводит к затруднениям при его раскрутке. Дело в том, что не все дизайнеры и верстальщики обладают необходимыми базовыми знаниями в области SEO. Они слепо стремятся удовлетворить требования клиента и совершенно не задумываются над тем, что после этого сайт нужно будет раскручивать. А что раскручивать, если весь сайт - является набором картинок или мультипликации?

Не так давно мне для раскрутки достался один из таких сайтов. Хозяйка сайта - дизайнер интерьеров по профессии и поэтому внешний вид своего сайта поставила во главу угла. В результате всё меню сайта - было красивым, но графическим, выполненным с помощью корпоративного шрифта - Bauhaus. Благо язык PHP богат на всякого рода библиотеки, поэтому ребята разработчики и решили, не мудрствуя лукаво, формировать меню сайта с помощью таких вещей.

Как сами понимаете, раскрутить сайт с помощью одних только Alt и Title на картинках - затруднительно, поэтому я решил найти альтернативное решение, тем более, что эта проблема мне давно не давала покоя. Но как интегрировать любой понравившийся шрифт в свой сайт? Оказывается решение есть и причем довольно простое.

Оказывается, что с помощью CSS можно интегрировать в сайт любые TTF-шрифты, но они достаточно громоздки и влияют на скорость загрузки, а вот EOT-шрифты в 3-5 раз легче! Где же взять EOT шрифты? На сегодня я знаю 2 утилиты, которые умеют конвертировать TrueType-шрифты в формат EOT (Embedded OpenType). Первая, от всем известного производителя - Microsoft WEFT (Web Embedding Fonts Tool), другая от другого монстра - Google - ttf2eot (кроссплатформенная утилита). WEFT - имеет графический интерфейс, а ttf2eot запускается из командной строки.

Пример команды: ttf2eot < input.ttf > output.eot

После того как EOT-шрифт сгенерирован (в моем случае это был файл BAUHAUS1.eot, размер 10 Кб), можно приступать к его использованию. Для этого нужно подключить данный файл и связать его с CSS-ким font-family, которое затем можно использовать в привычном, для верстальщика, виде.

Важное замечание. Значение параметра font-family задается не произвольным образом, а является точным названием шрифта, которое можно увидеть с помощью любого TTF-вьюера.

В результате получим следующий CSS-код:

<STYLE TYPE="text/css">

@font-face {
font-family: BauhausLightCTT;
font-style: normal;
font-weight: normal;
src: url(BAUHAUS1.eot);
}

.eotexample {
font-family: BauhausLightCTT, sans-serif;
font-size: 18px;
color: #000099;
}

</STYLE>

... и HTML-код :

<p class="eotexample">Данный шрифт используется на сайте Дизайн бюро "Gratage Visual" </p>

Конечный результат :


Данный шрифт используется на сайте Дизайн бюро "Gratage Visual"



Объективности ради, должен сказать, что данный метод не является панацеей, т.к. не все EOT-шрифты адекватно отображаются на веб-страничках, причем чем меньше размер шрифта, тем корявее он выглядит, по крайней мере некоторые из них (всем завитушкам и засечкам просто негде развернуться).

К тому же, не все браузеры понимают eot-шрифты. Поэтому, для кросс-браузерного решения нужен еще один шрифт - OTF (open type font), который понимают все нормальные браузеры, кроме осла. Создать такой можно различными утилитами, но лично я это делаю с помощью TransType Pro от Fontlab.

P.S. Честно говоря, я до сих пор удивлен почему данный прием не получил такого широкого распространения как графическое меню сайтов :)

 

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3