Pull to refresh

Typeface.js — не текст, а картинка (JavaScript + SVG/VML).

Reading time 2 min
Views 5.8K
Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет PHP c функцией imagettftext. Для выполнения же такой манипуляции на стороне клиента пригодится скрипт описанный в этой заметке.

Итак, речь идет о typeface.js.
Для того, чтобы творить чудеса потребуется:
  1. добыть сам скрипт (typeface-0.10.js);
  2. подготовить шрифт при помощи специального инструмента;
  3. подключить скрипт и полученый файл шрифта с расширением .js к странице;
  4. добавить класс typeface-js элементу страницы, который нужно изобразить диковинным шрифтом;
  5. этому классу присвоить: font-family: Some Font; (название вашего шрифта. Здесь стоит быть внимательным и название брать из программы-просмотрщика шрифтов или, скажем, из Фотошопа).
Например:
<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>
Вот, собственно и все. Также стоит заметить, что конвертер шрифтов можно скачать в виде отдельного PERL-модуля для локального использования.

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

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

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

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

UPD. Сравнение sIFR и typeface.js докладно описал Olegas в своей заметке под названием «Типографика. Сравнение sIFR и typeface.js»
Tags:
Hubs:
+33
Comments 33
Comments Comments 33

Articles