На прошлой неделе Филон показал вам, как реализовать sIFR3. На этот раз я собираюсь показать вам, как реализовать Facelift Image Replacement (или FLIR), альтернативу sIFR, которая не требует Flash.
Обратите внимание, что для демонстрации правильного копирования в демонстрации используются шрифты, отличные от тех, которые используются в руководстве.
Шаг 1 — Настройка FLIR
Первый шаг — скачать FLIR . Разархивируйте загрузку и поместите папку внутри (facelift-1.1.1) где-нибудь на вашем веб-сервере. Я переименовал папку, чтобы просто «подтяжка лица», чтобы сделать вещи проще.
В папке facelift находится файл Javascript с именем «flir.js». Вы можете оставить его там или переместить в другое место, например, в централизованную папку для файлов Javascript. Для этого урока мы сделаем именно это и переместим его в папку с именем «js» в корневой директории нашего сайта.
Теперь откройте файл flir.js в вашем любимом текстовом редакторе и перейдите к строке 30. Она должна выглядеть примерно так:
|
1
|
,path: »
|
Нам нужно указать абсолютный или относительный путь к нашему каталогу подтяжки лица между двумя одинарными кавычками. Однако относительные пути относятся к странице, а не к файлу flir.js, что может вызвать некоторые проблемы с сайтами, которые используют mod_rewrite для создания красивых URL-адресов. Самый верный способ заставить все работать, это обеспечить абсолютный путь.
|
1
|
,path: ‘/path/to/facelift/’
|
Откройте страницу, к которой вы хотите добавить FLIR, и добавьте следующее между тегами head, чтобы прикрепить flir.js:
|
1
|
<script src=»js/flir.js» type=»text/javascript»></script>
|
Затем добавьте следующее прямо перед закрывающим тегом body:
|
1
2
3
4
|
<script type=»text/javascript»>
FLIR.init();
FLIR.auto();
</script>
|
Шаг 2 — Выберите и настройте шрифты
Этот шаг довольно прост. Загрузите шрифты, которые вы хотите использовать. Я буду использовать Delicious , Tallys и Tusj . Поместите ваши шрифты в папку «fonts» внутри папки «facelift». Откройте config-flir.php, и вы найдете блок кода, который выглядит примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts[‘tribalbenji’] = ‘Tribal_Font.ttf’;
$fonts[‘antagea’] = ‘Antagea.ttf’;
$fonts[‘illuminating’] = ‘ArtOfIlluminating.ttf’;
$fonts[‘bentham’] = ‘Bentham.otf’;
$fonts[‘geo’] = ‘Geo_Oblique.otf’;
$fonts[‘puritan’] = ‘Puritan_Regular.otf’;
$fonts[‘konstytucyja’] = ‘Konstytucyja_1.ttf’;
$fonts[‘promocyja’] = ‘Promocyja.ttf’;
$fonts[‘stunfilla’] = ‘OPN_StunFillaWenkay.ttf’;
$fonts[‘animaldings’] = ‘Animal_Silhouette.ttf’;
// The font will default to the following (put your most common font here).
$fonts[‘default’] = $fonts[‘puritan’];
|
Как видно из комментариев, каждая запись в массиве $ fonts является шрифтом в папке fonts. Ключ массива в скобках — это то, что мы используем в наших декларациях CSS, когда хотим использовать шрифт. Давайте добавим шрифты, которые мы скачали ранее.
|
1
2
3
|
$fonts[‘ffftusj’] = ‘FFF Tusj.ttf’;
$fonts[‘deliciousheavy’] = ‘Delicious-Heavy.otf’;
$fonts[‘tallys’] = ‘Tallys_15.otf’;
|
Все, что назначено для $ fonts [‘default’], будет использовано, если шрифт не указан. Давайте сделаем Delicious Heavy по умолчанию.
|
1
|
$fonts[‘default’] = $fonts[‘deliciousheavy’];
|
В файле config-flir.php есть ряд других настроек, но их можно оставить в покое. То, что делает каждый параметр, довольно очевидно, и есть комментарии, если вы хотите настроить их.
Шаг 3 — Стайлинг
По умолчанию FLIR будет выполнять замену изображений только для заголовков. Вы можете указать, что следует заменить, передав массив CSS-селекторов в функцию FLIR.auto (), которую мы добавили в шаге 1.
|
1
|
FLIR.auto([ ‘h1’, ‘h2’, ‘h3.alert’, ‘strong#important’ ]);
|
Это скажет FLIR применить замену изображения к тегам h1, тегам h2, тегам h3 с классом «alert» и сильным тегам с идентификатором «Important».
Теперь все, что нам нужно сделать, это применить стили CSS, как обычно. Используйте ключи массива $ fonts в качестве шрифта в объявлении CSS, чтобы использовать этот шрифт. Позволяет применять Tusj ко всем тегам h1, Delicious Heavy — ко всем тегам h2 и Tallys ко всем тегам h3 с классом оповещения.
|
1
2
3
|
h1 { font-family: ffftusj, Georgia, serif;
h2 { font-family: deliciousheavy, Arial, sans-serif;
h3.alert { font-family: tallys, Arial, sans-serif;
|
Это оно! Сильные теги с идентификатором «важное» будут использовать шрифт по умолчанию, который мы указали в config-flir.php, в данном случае это Delicious Heavy. Сгенерированный текст изображения будет масштабироваться до любого размера шрифта, указанного в CSS. Цвета CSS также будут проходить, а преобразования текста — нет.
Плюсы и минусы FLIR
Хотя FLIR — это довольно аккуратное решение для замены текстовых изображений, есть несколько незначительных проблем. Библиотека PHP GD не очень хорошо отображает мелкие детали, что довольно заметно в шрифте Tusj. Верхний текст отображался в Photoshop, а нижний текст — в библиотеке PHP GD, используемой FLIR.
Еще одним недостатком FLIR является то, что для этого требуется веб-сервер с PHP и библиотека GD. Тем не менее, большинство хостов имеют оба, так что это незначительно.
Преимущество FLIR перед sIFR, его основным конкурентом, заключается в том, что его проще внедрить и не требуется Flash для создания или просмотра.
И FLIR, и SIFR являются отличными решениями и будут вам полезны. Большинство посетителей смогут просматривать оба без особых проблем, но для немногих на краю кривой звонка, у которых нет Flash, FLIR может быть лучшим решением.