Все мы знаем прекрасные библиотеки 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>
Шрифт на сайте...
Похожие темы
Линейный вид
