Матвей Земсков

Заметки веб-мастера

Воскресенье, 13 апреля 2014 10:00

Современный способ CSS замены текста изображениями заменяющий метод -9999px

Оцените материал
(1 Голосовать)

Замена текста картинками применяется в процессе верстки макетов уже очень долгое время. Причина этого в том, что в начале 2000-х годов разработчики могли использовать на веб-страницах довольно ограниченное количество шрифтов. В основном это были «стандартные» шрифты, например, Verdana или Georgia. Для того чтобы как-то «оживить» страничку, веб-мастера создавали в графическом редакторе изображение с надписью каким-то «нестандартным» шрифтом и размещали его в качестве фона элемента (например, заголовка) на странице, а текстовое содержимое «прятали». 

Несмотря на то, что времена изменились и сейчас разработчикам доступны различные свободно распространяемые и коммерческие шрифты (например, на Google Fonts), иногда может возникнуть ситуация, что необходимо будет заменить текст изображением.

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

Кроме того, при отображении на странице логотипов, основанных на тексте с помощью CSS добиться 100%-ного сходства будет очень сложно, поэтому замена текста изображением в этом случае придется кстати.

Первой технической реализацией замены текста изображениями был метод FIR (Fahrner Image Replacement), появившийся в начале 2000-х. Затем на его основе появился метод Phark, который решал некоторые проблемы с отображением контента методом FIR.

Метод очень простой и состоит всего из нескольких строк CSS-кода.

CSS

h1{
    text-indent: -9999px;
    background: url(h1_replace.png) no-repeat;
    width: XXXpx;
    height: XXXpx;
}

Как можно увидеть из кода, текст скрывается за счет отрицательного значения text-indent. Это CSS-правило предназначено для создания отступа первой строки блока текста («красной» строки).

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

На данный момент доступен еще один альтернативный способ замены текста изображениями. Автором этого способа является Скотт Келлум.

CSS

h1{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Преимущества этого способа следующие:

  • Содержимое блока никогда не выйдет за его границы, поэтому внутри блока можно разместить много текста
  • Производительность браузера значительно увеличивается из-за того, что не нужно создавать огромный блок шириной 9999px

Конечно, какой из методов использовать для замены текста изображением выбирает сам разработчик. У первого способа есть существенные недостатки, второй способ немного лучше. Вероятно, в процессе разработки вы сможете обойтись вообще без замены текста изображениями, подключая необходимый шрифт через @font-face. Тем не менее, не нужно совсем забывать об описанных методах, потому что может случиться так, что при определенных обстоятельствах их еще придется когда-нибудь применить.

Прочитано 9462 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх