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

У цій статті я розповім про такий css техніці, як
заміна нестандартного шрифту картинкою. Часто дизайнери застосовують в різних елементах сайту (наприклад в шапці,
заголовках) нестандартні шрифти. Як же зробити так, щоб шрифт був
видно всім користувачам? Для цього
застосовують просту css техніку. Ми замінюємо текст картинкою. Але як же бути з
пошуковими системами, як вони розпізнають текст? Робимо наступним чином:
1
Заголовок сайту
1
h1 {
2
width: 250px;
3
height: 90px;
4
background: url(img/logo.png);
5
}
6
7
h1 span {
8
display:none;
9
}
Тобто визначаються розміри блоку h1 і задається
фон для нього, в якості якого і буде зображення logo.png, розміром 250 на
90 px, з нестандартним шрифтом. Реальний
текст полягає в тег , яким задається css властивість
display:none, тобто він робиться невидимим. Є інший варіант:
1
Заголовок
1
h1.main_logo {
2
width: 250px;
3
height: 90px;
4
background: url(img/logo.png);
5
text-indent: -9999px;
6
}
Тут ми робимо такий відступ рядка (text-indent:
-9999px; ), що текст просто заходить за межі блоку. З точки зору пошукових систем така техніка
буде допустимою, але при цьому текст на зображення повинен відповідати
заменяемому тексту. можна не боятися
санкцій і сміливо застосовувати даний метод.
Джерела: Уроки верстки сайтів, Заміна нестандартного шрифту зображенням