Достаточно часто случается так, что для оформления той или иной страницы требуется использование нестандартного шрифта. Если текст не генерируется динамически мы можем просто заготовить картинку с надписью. В противном же случае на помощь придет 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>
Из плюсов такого способа отображения шрифтов отмечу отличное понимание скриптом CSS. Это означает, что для класса
typeface-js можно написать:
.typeface-js {
font:bold 36px Some Font;
color:red;
}
К недостаткам же стоит отнести ресурсоемкость. Для пунктов меню, скажем, или заголовков он вполне подходит, в то время как для больших объемов текста он будет тяжеловат (нужно ли?). Также поддержка кириллических шрифтов осуществляется только при использовании кодировки UTF-8 (что вполне логично).
В перспективе ожидаются: увеличение скорости работы в IE, полная поддержка
@font-face, добавление неработающих ныне CSS-свойств (в частности x-height и подкласса :hover), и т.д.Надеюсь был полезен и благодарю за внимание.
Все благодарности и вопросы касательно работы механизма описанного выше прошу адресовать его создателю — Дэвиду Честеру.
UPD. Сравнение sIFR и typeface.js докладно описал Olegas в своей заметке под названием «Типографика. Сравнение sIFR и typeface.js»
