zhernovoi Mar 11 2009 at 11:46

Используем любой шрифт с Javascript.

3 min

24K

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

Сегодня я расскажу о библиотеке Typeface.js, которая, как видно из названия, работает на чистом JavaScript.

Немного теории

Официальный сайт библиотеки Typeface.js — http://typeface.neocracy.org/. На этом ресурсе можно найти всю дополнительную информацию.

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

Библиотека основывается на встроенных в браузер возможностях отрисовки векторной графики. Уже довольно долгое время браузеры поддерживают отрисовку векторной графики, 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;"> Хабрахабр.ру </div>
Стиль можно задать как в атрибуте стайл, так и в css. Font-family должен быть названием шрифта, подгруженного с библиотекой. Для справки, правильное название можно посмотреть внизу конвертированного js файла с векторным отображением шрифта.

Всё, можно загружать страницу в браузере и смотреть результат!
А вот пример такой страници целиком:
blockquote>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Хабрафонт</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="text/javascript" src="js/typeface-0.11.js"></script>
    <script type="text/javascript" src="js/als_agrus__regular.typeface.js"></script>
    
  </head>
  <body>
  
    <div class="myclass typeface-js" style="font-family: ALSAgrus; font-size:40px;">
      Хабрахабр.ру
    </div>
    <div>
      Сверху мы видим обычный текст, обработанный <br /> библиотекой Typeface.js в шрифт ALS Agrus
    </div>
 
  </body>
</html>

Для примера я использую платный шрифт ALS Agrus для того, чтобы увидеть результат в более сложных шрифтах. То, что получилось у меня, можно увидеть на картинке в топе.

Tags:

Hubs:

JavaScript