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

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

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

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

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

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

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

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

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

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

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

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

Вы можете оставить комментарий.

8 комментариев к записи “Замена нестандартного шрифта изображением”

  1. Fati:

    Здравствуйте, Денпервый урок CSS отсюда начинается? не могу понять, где первый урок

  2. Fati:

    агаааспасибо большое, Ден.и спасибо за титанический труд

  3. Fati:

    Ден, а в каком месте у нотепада происходит назначение горячих клавиш для ввода тегов и атрибутов ?

  4. Роман:

    У меня не получается, ни как не пойму что куда? это по всей видимости вставляется вот такhttp://floomby.ru/s1/rANCk

    <h1 class="main_logo">Заголовок </h1> 
    а куда вставляется в это? в html или куда то в css

    • ПавелСурж:

      В html конечно! Это же html код! В css вообще нет тэгов, там только силекторы и свойства(объявления). А второй код в css

  5. на мой взгляд первый вариант изящнее и у поисковиков подозрений меньше

  6. Денис подключи еще подписку на комменты, хотелось бы некоторые темы отслеживать

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика