Использование любых шрифтов при верстке :)

Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет PHP c функцией
<a href="http://ua2.php.net/manual/ru/function.imagettftext.php">imagettftext</a>
. Для выполнения же такой манипуляции на стороне клиента пригодится скрипт описанный в этой заметке.
Итак, речь идет о typeface.js.
Для того, чтобы творить чудеса потребуется:
  1. добыть сам скрипт (typeface-0.10.js);
  2. подготовить шрифт при помощи специального инструмента;
  3. подключить скрипт и полученый файл шрифта с расширением
    .js
    к странице;
  4. добавить класс
    typeface-js
    элементу страницы, который нужно изобразить диковинным шрифтом;
  5. этому классу присвоить:
    font-family: Some Font;
    (название вашего шрифта. Здесь стоит быть внимательным и название брать из программы-просмотрщика шрифтов или, скажем, из Фотошопа).
Например:
<pre>
<html>
  <head>
<!-- Сначала грузим внешний файл стиля -->
    <link rel="stylesheet" type="text/css" ref="/style.css">

<!-- Затем библиотеку typeface.js и файл шрифта  -->

    <script type="text/javascript" src="typeface-0.10.js"></script>
    <script type="text/javascript" src="some_font_regular.typeface.js"></script>
  </head>

  <body>
    
<!-- Дальше — строго на север порядка 50-ти метров -->

    <div class="typeface-js" style="font-family: Some Font">
      Я — текст! И я написан шрифтом Some Font.
    </div>
  </body>
</html>
</pre>
Вот, собственно и все. Также стоит заметить, что конвертер шрифтов можно скачать в виде отдельного PERL-модуля для локального использования.

Из плюсов такого способа отображения шрифтов отмечу отличное понимание скриптом CSS. Это означает, что для класса
typeface-js
можно написать:
<pre>
.typeface-js {
font:bold 36px Some Font;
color:red;
}
</pre>
На выходе мы получим надпись жирным шрифтом Some Font 36-го кегля и красного цвета. Подробнее о свойствах CSS поддерживаемых скриптом можно прочесть на сайте разработчика.

К недостаткам же стоит отнести ресурсоемкость. Для пунктов меню, скажем, или заголовков он вполне подходит, в то время как для больших объемов текста он будет тяжеловат (нужно ли?). Также поддержка кириллических шрифтов осуществляется только при использовании кодировки UTF-8 (что вполне логично).

В перспективе ожидаются: увеличение скорости работы в IE, полная поддержка
@font-face
, добавление неработающих ныне CSS-свойств (в частности
x-height
и подкласса
:hover
), и т. д.

Надеюсь был полезен и благодарю за внимание.
Все благодарности и вопросы касательно работы механизма описанного выше прошу адресовать его создателю — Дэвиду Честеру.

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.