Создание собственного продукта: раскрутка сайтов.
Нестандартные шрифты на сайте
Как это работает
Библиотека основывается на встроенных в браузер возможностях отрисовки векторной графики. Уже довольно долгое время браузеры поддерживают отрисовку векторной графики, 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
Возврат к списку
|
