En sentidoweb he visto un artículo dónde explícan como invertir un texto mediante CSS, muy útil para insertar un email y que los spammers no te lo detecten..

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }  
</style>
<p><span class="test">moc.tset@tset</span></p>

Muy útil e ingenioso pero al no poder poner un “mailto” no sirve de mucho, para estos casos mejor utilizar jQuery para ocultar el código del email.

Cufón aspira a convertirse en una buena alternativa a sIFR, consta de dos partes:
Un generador de fuentes que convierte las fuentes a un formato propietario y un motor de renderizado escrito en JavaScript, es decir, mediante canvas.

Modo de empleo:
- Añadimos la librería cufon-yui.js en nuestro head.
- Nos dirigimos al generador de fuentes (Importante: Las fuentes tienen que ser formato True Type).
- Seleccionad vuestra fuente e incluimos los diferentes “glyphs” que necesitéis.
- Envíamos el formulario y automaticamente se generará un script para descargarlo.
- Añadir esa librería en vuestro head (Importante: Añadirlo justo después de la librería cufon-yui.js).

Para reemplazar el texto, añadimos lo siguiente en el head:

<script type="text/javascript">
	Cufon('h1'); //Esto reemplazará el contenido del h1 por la tipo que hayamos añadido.
</script>

Si queremos utilizar más de una tipo en nuestra web tendremos que hacer todos los pasos anteriores, es decir, añadir todos los scripts en el head y seguidamente añadir esto otro:

<script type="text/javascript">
	Cufon.replace('h1', {fontFamily:'Slant'});
	Cufon.replace('h2', {fontFamily:'Starnberg'});
</script>

Nota: Si utilizáis jQuery, podréis seleccionar más de un elemento de este modo:

<script type="text/javascript">
	Cufon.replace('h1, h3, .capaElemento', {fontFamily:'Slant'});
	Cufon.replace('h2, p, #otraCapa', {fontFamily:'Starnberg'});
</script>

Podéis ver un ejemplo: aquí.
Existe una wiki de cufón para los que quieran saber más.

Este post es la segunda parte del primer post, ya que se ha mejorado el script.

Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.

//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa) 
	if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
		$("body","html").css({height: "100%", width: "100%"});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$("#cssBackground").length>0) {
		$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$("#cssPopup").css("width",width);
	}
	if (height!=undefined) {
		$("#cssPopup").css("height",height);
		$("#cssPopup").css("overflow","auto");
	}
	$("#cssBackground").slideDown("slow"); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$("#cssPopup").load(URL,function(){
		//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$("#cssPopupContainer").css("top",50);
		ancho=$(window).width();
		$("#cssPopupContainer").slideDown("fast", function () {
			anchopopup=$("#cssPopup").width();
			$("#cssPopupContainer").css("width",ancho);			
		});
	});
}

function popupCssHide () {
	$("#cssPopupContainer").slideUp("fast", function () {
		$("#cssBackground").fadeOut("fast",function () {
			$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
			$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition > 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}

La hoja de estilos quedaría de la siguiente manera:

#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}

Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:

<!--[if lt IE 7]>
<style type="text/css" media="all">
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->

Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:

<!--[if IE 7]>
<style type="text/css" media="all">
	#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->

Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:

<?
if ($_GET['page']=="pagina-1") {
	include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
	include ("includes/pagina-2.php");
	}
?>

Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.

Para llamar al popup sería de la siguiente forma:

<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>

También le pasamos el parámetro ’460′ para que nos habrá la ventana a ’460px’.

Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.

Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.

Versión mejorada del script: aquí.