→   Любой шрифт на сайте

Скорее всего, все знают о библиотеках sIFR3 и FLIR они позволяют использовать любой шрифт на сайте, однако установку этих библотек вряд ли можно назвать легкой, по-крайней мере, с моей точки зрения.

sIFR, например, использует не только дваваскрипт, но и браузерный флеш плагин, а еще чтобы создать файл шрифта необходимо использовать какой-нибудь флеш редактор, например, адоди флеш.
FLIR вообще требует, наличие PHP (причем, желательно пятого), как все уже догадались там основной трюк происходит на стороне сервера, он подготавлявает картинку и в нужных местах и заменяет текст подготовленной картинкой. Привычный метод, но зачем грузить сервер понапрасну.

Решение которое работает на чистом джаваскрипте называется — Typeface.js. Оно более удобное и даже более изящное, потому что использует возможности самого браузера, а не сервера.

→  Как это?

Библиотека использует возможности браузеров отрисовывать векторную графику. В случае с ФаирФоксом используется поддержка обьектов canvas и SVG, а в случае с ослом поддержка VML. На официальном сайте библиотеки Typeface.js — http://typeface.neocracy.org/, заявлена поддержка браузеров: Firefox 1.5+, Safari 2+, Internet Explorer 6+.

→   И как это работает?

Библиотека с помощью модуля perl конвертирует шрифт в соотвествующие векторные координаты, а джаваскрипт отрисовывает форму шрифта на сайте.

Для того чтобы всё это заработало, нужно:

  • Скачать саму библиотеку
  • Сконвертировать нужный трутайп шрифт при помощи «Convert a Font»
  • Положить полученный джаваскриптовый файл в директорию с библиотекой.

Далее в <head> страницы прописываем:

  1. <script type="text/javascript" src="js/typeface-0.11.js"></script>
  2. <script type="text/javascript" src="js/kratos_truetype_regular.typeface.js"></script>
Файл shape-font.typeface.js — результат конвертирования.
звездочка Очень важно подключить сначала все внешние css, а уже потом подключать библиотеку, иначе ни фига работать не будет. Вообще, таким образом, лучше все библиотеки подключать, так и советуют поступать с jQuery её создатели, в частности Джон Ресиг.

html будет выглядеть примерно следующим образом: любому тэгу, в котором нужно отображать контент выбранным шрифтом, присвоим класс .typeface-js.

  1. <div class="something-class typeface-js" style="font-family: Kratos; font-size:5em;">
  2.      Какой-нибудь текст.
  3. </div>

→  Ещё одна приятная полезность

Текст будет текстом, то есть поисковики его увидят и смогут проиндексировать. Этот текст даже можно будет выделить, скопировать и т.д. Только это будет работать в браузерах поддерживающих canvas, то есть в IE это работать не будет. :)

→  Пример   ↓

yeap, ths Kratos