Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет PHP c функцией
Итак, речь идет о typeface.js.
Для того, чтобы творить чудеса потребуется:
Из плюсов такого способа отображения шрифтов отмечу отличное понимание скриптом CSS. Это означает, что для класса
К недостаткам же стоит отнести ресурсоемкость. Для пунктов меню, скажем, или заголовков он вполне подходит, в то время как для больших объемов текста он будет тяжеловат (нужно ли?). Также поддержка кириллических шрифтов осуществляется только при использовании кодировки UTF-8 (что вполне логично).
В перспективе ожидаются: увеличение скорости работы в IE, полная поддержка
Надеюсь был полезен и благодарю за внимание.
Все благодарности и вопросы касательно работы механизма описанного выше прошу адресовать его создателю — Дэвиду Честеру.
UPD. Сравнение sIFR и typeface.js докладно описал Olegas в своей заметке под названием «Типографика. Сравнение sIFR и typeface.js»
imagettftext
. Для выполнения же такой манипуляции на стороне клиента пригодится скрипт описанный в этой заметке.Итак, речь идет о typeface.js.
Для того, чтобы творить чудеса потребуется:
- добыть сам скрипт (typeface-0.10.js);
- подготовить шрифт при помощи специального инструмента;
- подключить скрипт и полученый файл шрифта с расширением
.js
к странице; - добавить класс
typeface-js
элементу страницы, который нужно изобразить диковинным шрифтом; - этому классу присвоить:
font-family: Some Font;
(название вашего шрифта. Здесь стоит быть внимательным и название брать из программы-просмотрщика шрифтов или, скажем, из Фотошопа).
Например:
<html>
<head>
<!-- Сначала грузим внешний файл стиля -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- Затем библиотеку typeface.js и файл шрифта -->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="some_font_regular.typeface.js"></script>
</head>
<body>
<!-- Дальше — строго на север порядка 50-ти метров -->
<div class="typeface-js" style="font-family: Some Font">
Я — текст! И я написан шрифтом Some Font.
</div>
</body>
</html>
Вот, собственно и все. Также стоит заметить, что конвертер шрифтов можно скачать в виде отдельного PERL-модуля для локального использования.Из плюсов такого способа отображения шрифтов отмечу отличное понимание скриптом CSS. Это означает, что для класса
typeface-js
можно написать:
.typeface-js {
font:bold 36px Some Font;
color:red;
}
На выходе мы получим надпись жирным шрифтом Some Font 36-го кегля и красного цвета. Подробнее о свойствах CSS поддерживаемых скриптом можно прочесть на сайте разработчика.К недостаткам же стоит отнести ресурсоемкость. Для пунктов меню, скажем, или заголовков он вполне подходит, в то время как для больших объемов текста он будет тяжеловат (нужно ли?). Также поддержка кириллических шрифтов осуществляется только при использовании кодировки UTF-8 (что вполне логично).
В перспективе ожидаются: увеличение скорости работы в IE, полная поддержка
@font-face
, добавление неработающих ныне CSS-свойств (в частности x-height
и подкласса :hover
), и т.д.Надеюсь был полезен и благодарю за внимание.
Все благодарности и вопросы касательно работы механизма описанного выше прошу адресовать его создателю — Дэвиду Честеру.
UPD. Сравнение sIFR и typeface.js докладно описал Olegas в своей заметке под названием «Типографика. Сравнение sIFR и typeface.js»