Методы замены текста на веб-страницах

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

Метод #1 (FIR – Fahrner Image Replacement)

Суть метода заключается в сокрытии текста одним из свойств css – display:none;

Базовая строка заключается в дополнительный элемент:

<h2><span>text here</span></h2>

Затем для внешнего контейнера устанавливаем фоновое изображение, а внутренний скрываем:

h2 {background:url(img.jpg) 0 0 no-repeat; width:100px; height:20px;}
h2 span {display:none;}

К недостаткам метода можно отнести нечитабельность при отключении картинок, а также некоторое «недоверие» поисковиков к скрытым элементам.

Метод #2 (Phark)

Этот способ предполагает сдвиг текста за пределы экрана c помощью большого отрицательного значения для text-indent

h2 { background:url(img.jpg) 0 0 no-repeat; width:100px; height:20px; text-indent:-10000px;}

Строка html метода выглядит наиболее семантично, без дополнительных элементов:

<h2>text here</h2>

Недостаток тот же что и в методе FIR – отсутствие текста при отключении изображений.

Метод #3 (Gilder-Levin)

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

Добавим в нужный нам элемент пустой дескриптор span:

<h2><span></span>text here</h2>

И с помощью CSS сделаем его «над» родительским контейнером:

h2 {position:relative; width:100px; height:20px;}
h2 span {position:absolute; width:100%; height:100%; background:url(img.jpg) 0 0 no-repeat;}

Недостатками стоит отметить несемантичность верстки (на которую, справедливости ради, многие даже и не смотрят) и невозможность использовать прозрачные изображеня.

Метод #4 (javascript)

Яваскрипт позволяет перед показом странички заменить стандартный шрифт на нужный. Например, с помощью библиотеки cufon

Метод #5 (sIFR)

Состоит в передаче строк текста в flash-ролик, который нужным образом их выводит. В сочетании с javascript достаточно дописывать для нужных html элементов только класс, все остальное берут на себя надстройки.

Скачать последнюю версию sIFR можно тут — http://dev.novemberborn.net/sifr3/nightlies/