Несмотря на то, что времена изменились и сейчас разработчикам доступны различные свободно распространяемые и коммерческие шрифты (например, на Google Fonts), иногда может возникнуть ситуация, что необходимо будет заменить текст изображением.
Например, это может произойти, если нужно разместить на страничке какую-нибудь короткую надпись и загружать из-за нее шрифт не целесообразно. Еще может случиться так, что вы не сможете найти шрифт во всех требуемых форматах, ведь не все форматы поддерживаются разными браузерами.
Кроме того, при отображении на странице логотипов, основанных на тексте с помощью CSS добиться 100%-ного сходства будет очень сложно, поэтому замена текста изображением в этом случае придется кстати.
Первой технической реализацией замены текста изображениями был метод FIR (Fahrner Image Replacement), появившийся в начале 2000-х. Затем на его основе появился метод Phark, который решал некоторые проблемы с отображением контента методом FIR.
Метод очень простой и состоит всего из нескольких строк CSS-кода.
CSS
Как можно увидеть из кода, текст скрывается за счет отрицательного значения text-indent. Это CSS-правило предназначено для создания отступа первой строки блока текста («красной» строки).
Несмотря на большую популярность этого способа, у него есть существенный недостаток: чтобы реализовать такой гигантский отступ, браузер создает блок такого же размера, что отрицательно сказывается на производительности и времени загрузки страницы.
На данный момент доступен еще один альтернативный способ замены текста изображениями. Автором этого способа является Скотт Келлум.
CSS
Преимущества этого способа следующие:
- Содержимое блока никогда не выйдет за его границы, поэтому внутри блока можно разместить много текста
- Производительность браузера значительно увеличивается из-за того, что не нужно создавать огромный блок шириной 9999px
Конечно, какой из методов использовать для замены текста изображением выбирает сам разработчик. У первого способа есть существенные недостатки, второй способ немного лучше. Вероятно, в процессе разработки вы сможете обойтись вообще без замены текста изображениями, подключая необходимый шрифт через @font-face
. Тем не менее, не нужно совсем забывать об описанных методах, потому что может случиться так, что при определенных обстоятельствах их еще придется когда-нибудь применить.