Подписка
Email
Fb
RSS
Twitter
Email

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

Приветствую Вас, посетители сайта DenWeb.Ru. В этой статье хочу рассказать о такой css технике, как замена нестандартного шрифта изображением.

Иногда дизайнеры используют в различных элементах сайта (например в шапке, заголовках) нестандартные шрифты. Как же сделать так, чтобы данный шрифт отображался у всех пользователей?

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

[sourcecode language=»html»] <h1><span>Заголовок сайта</span></h1> [/sourcecode]
[sourcecode language=»css»]h1 {
width: 250px;
height: 90px;
background: url(img/logo.png);
}
<br />
h1 span {
display:none;
}[/sourcecode]

То есть задаются размеры блока h1, а так же задается фон этого блока, в качестве которого и будет изображение logo.png, размером 250 на 90 px, с нестандартным шрифтом.

Реальный текст заключается в тег <span>, которому задается css свойство display:none, то есть он делается невидимым.

Есть и другой вариант:

[sourcecode language=»html»] <h1 class="main_logo">Заголовок </h1> [/sourcecode]
[sourcecode language=»css»] h1.main_logo {
width: 250px;
height: 90px;
background: url(img/logo.png);
text-indent: -9999px;
} [/sourcecode]

В данном случае мы делаем такой отступ строки (text-indent: -9999px; ), что текст просто уходит за пределы блока.

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