Как уйти от стандартных шрифтов?

У rotor’a пару дней назад была опубликована очень интересная статья о том, как с помощью CSS, JavaScript и PHP изменить стандартные шрифты на сайте без использования флэш!

Данная технология называется FLIR (Facelift Image Replacement), своего рода альтернатива sIFR.

Как работает

При загрузке страницы, JavaScript, установленный на сайте находит теги, помеченные специальными CSS-классами и отсылает запрос на сервер, затем PHP-сценарий, подменяет текст в этих тегах автоматически сгенерированным картинками с нужным нестандартным шрифтом.

Примеры использования FLIR можно увидеть всё на том же сайте разработчика (facelift.mawhorter.net/examples/) и протестировать (http://facelift.mawhorter.net/preview/) собственные сайты (к сожалению, не работает для кириллических символов:( ).

Установка

Не буду останавливаться на этом, так как инструкции к использованию вы можете найти на следующих сайтах:

• facelift.mawhorter.net
• divitodesign.com
• nettuts.com

Несмотря ни английский, всё интуитивно понятно а на у кого не должно вызвать затруднений.

На что стоит обратить внимание:
В погоне за красотой старайтесь не забывать про программный код, т.к. лишний запросы к базе данных создают дополнительную нагрузку на сервер. Такая проблема не будет критической, если это сайт-визитка, страниц эдак на пять. А представьте, что у вас портал, где примерно три тысячи страниц в индексе с посещаемость в районе семи тысяч уников в день!!! В этом случае ваш проект должно быть подобен монолиту, как гранитные памятники - изготовление здесь. А значит надо стараться свести к минимуму все лишнее и ненужное.

Плюсы

• лёгкая настройка
• не требуется поддержка плагинов в браузере (единственное требование, поддержка PHP GD library (библиотека для работы с графикой) на сервере);
• заменённый текст доступен поисковикам через атрибут alt;
• при отключенном JavaScript, выводится стандартный С?рифт, установленный в стилях;
• автоматическое подгонка изображения под размер подменяемого С?рифта;
• возможность выбора формата генерируемого изображения (GIF, PNG);
• при выделении и копировании текста и изображений, атрибуты alt копируются как нормальный текст.

А специально для блоггеров существует плагин для WordPress - Facelift Image Replacment (FLIR).

Минусы

• наблюдается некоторая «косячность» работы в Opera, в частности, при копировании текста вместе с изображениями, текст из атрибута alt не копируется. Эту проблему разработчик обещал исправить в последующих билдах;
• проблема при рендеринге некоторых шрифтов, поэтому предварительно отображение следует протестировать локально.

Где использовать

Для заголовков на сайтах. Отличный выход для имиджевых проектов, где стандартных платформенных шрифтов явно недостаточно.

Спасибо за добавление статьи в: