Нестандартные шрифты на сайте

Как это работает

Библиотека основывается на встроенных в браузер возможностях отрисовки векторной графики. Уже довольно долгое время браузеры поддерживают отрисовку векторной графики, Firefox имеет поддержку обьектов canvas и SVG, а IE поддерживает VML. Поддержка браузеров, заявленная разработчиком Дэвидом Честером (David Chester): Firefox 1.5+, Safari 2+, Internet Explorer 6+.
Библиотека состоит из двух компонентов: perl модуля для конвертирования truetype шрифтов в векторные координаты и javascript-файла, который рендерит текст в браузере используя векторное описание шрифтов.

Преимущества

  • Самое главное — отсутствие Flash. Всё работает на встроенных возможностях браузеров (при чем даже не самых последних версиях).
  • Быстрая и простая установка. Не нужно разбираться в тонкостях более «навороченных» sIFR и FLIR.
  • Текст видим как «текст», его можно выбрать, скопировать и т.д. Поисковики обрабатывают всё именно как текст. Правда, выбрать текст можно только в браузерах, поддерживающих canvas.
  • Поддержка всех свойств текста в CSS2. (font-size, letter-spacing, font-stretch, font-weight, line-height и т.д)

Подготовка

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

Процесс

  • В <head> документа помещаем
    <script type="text/javascript" src="js/typeface-0.11.js"></script>
    <script type="text/javascript" src="js/moj-font.typeface.js"></script>
    где moj-font это тот документ, который мы получили в результате конвертирования.
  • ВАЖНО! Все css-файлы должны быть подгружены перед подгрузкой библиотеки. Это архиважно, иначе результата не будет.
  • В <body> документа любому слою, в котором нам нужно присвоить тексту выбранный шрифт, ставим класс typeface-js.
    <div class="myclass typeface-js" style="font-family: ALSAgrus; font-size:40px;">
          Test text
    </div>
  • Стиль можно задать как в атрибуте style, так и в css. Font-family должен быть названием шрифта, подгруженного с библиотекой. Для справки, правильное название можно посмотреть внизу конвертированного js файла с векторным отображением шрифта.
Всё, можно загружать страницу в браузере и смотреть результат. Еще один кандидат - Cufon


Возврат к списку

149
4.03