Замена нестандартного шрифта изображением

В этой статье я расскажу о такой css технике, как замена нестандартного шрифта картинкой. Часто дизайнеры применяют в различных элементах сайта (например в шапке, заголовках) нестандартные шрифты. Как же сделать так, чтобы данный шрифт был виден всем пользователям? Для этого применяют простую css технику. Мы заменяем текст картинкой. Но как же быть с поисковыми системами, как они распознают текст? Делаем следующим образом:

То есть определяются размеры блока h1 и задается фон для него, в качестве которого и будет изображение logo.png, размером 250 на 90 px, с нестандартным шрифтом. Реальный текст заключается в тег <span>, которому задается css свойство display:none, то есть он делается невидимым. Есть другой вариант:

Здесь мы делаем такой отступ строки (text-indent: -9999px; ), что текст просто заходит за пределы блока. С точки зрения поисковых систем такая техника будет допустимой, но при этом текст на изображение должен соответствовать заменяемому тексту. можно не бояться санкций и смело применять данный метод.