Новый метод замены текста картинкой, или избавляемся от -9999px

Да, заранее прошу прощение за форматирование, первый пост :(

А ларчик-то просто открывался )))
Спасибо!

Еще можно использовать способ line-height: 9999em; который вытолкнет текст не в стороны а вниз. И который также не зависит от выравнивания.

Я уже давно втаких случаях использовал «color: transparent», но без обнуления шрифта. Проблем особых не наблюдается.

h1 {
	background-image:url(img/1326900333.jpg);
	height:240px;
	width:384px;
	background-repeat: no-repeat;
	
	color:transparent;
	overflow:hidden;
}

Что я сделал не так? link
Попробуйте выделить картинку.

А вот вам ещё один способ.
Используются псевдоэлементы. Так что IE8+.

А почему бы встраивать шрифты в сайт и писать текст текстом?

Это все плохие решения. Почему? Потому, что надо исходить не из абстрактной «семантики», а из решения минимум 2 задач: корректного отображения текста на разных устройствах (в т.ч. при отключеннных картинках) и корректного понимания текста поисковыми системами.

Этот способ не решает ни первой проблемы (если отключить картинки, текст не виден), ни второй (поисковики, увидев что у текста нулевой размер шрифта, могут игнорировать его).

Потому я обычно делаю так: спан с position:relative, display: inline-block, overflow: hidden, в нем текст, поверх него спан с position: absolute и фоном в виде картинки (с непрозраным фоном). Если картинка не загрузилась, виден текст под ней.

Но этот способ не позволяет использовать прозрачную картинку (так как через нее будет просвечивать текст). Может, можно его как-то доработать? Чтобы, например, поместить текст и картинку в общий контейнер и картинка при загрузке сдвигала текст за пределы видимости? Что-то у меня нет решения.

варианты с нулевым размером шрифта и псевдоэлементами не применимы к старым браузерам. А то светлое будущее, в котором не осталось старых браузеров, пока еще далеко за горами. Так что зря вы, на мой взгляд, привели эти примеры.
Надо будет опробовать метод Зельдмана. Даже если он не работает в ИЕ6, для того старичка неизбежно пишется отдельный стилевой файл, в который никто не мешает воткнуть -9999px.

всегда писал -999em и экономил байт!

Мне ближе два других варианта:

<a href="#"><img src="картинка.png" alt="тут писать текст"></a>

либо, который кстати чаще использую:

<a href="#"><span>тут писать текст</span></a>

в стилях так:

a {background:url('картинка.png') no-repeat} /* соответственно ширина, высота и display: block */
a span {display:none}

отрицательными отступами и т.д. как-то не пользовался никогда, уж простите.

Разумеется использую их там, где font-face не помогает!

IMHO, нужен SVG+Web-fonts. При этом индексироваться будет сам текст на картинке. Плюс появляется возможность отображать текст на картинке на том языке, который установлен в браузере.

Зелдман пишет:

My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Т.е. не Зелдман этот метод придумал, а просто о нём рассказал.

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

.logo {
  background: url(logo.png);
  font-size: 999em;
  height: 50px;
  overflow: hidden;
  width: 100px;
}

Эмм. А в чем проблема-то? Почти как начал верстать и понимать SEO принципы, верстаю так и не думал, что есть методы даже чьим-то именем названные.

<style>
.logo{
   display:block;
   overflow:hidden;
   width:imgWidth px;
   height:imgHeight px;
}
</style>
<a href="/" class="logo"><img src="img.png" align="left"/>название сайта</a>

Если картинки нет или отключена — видим текст. Есть — выталкивает текст и видим только картинку. Из старого тестил только в IE6-7, но ничего не указывает на не кроссбраузерность.