Para que funcione corréctamente necesitaremos la ayuda de jQuery y, evidentemente, tener instalada la fuente que queremos representar (solo en tu equipo). La técnica consta de los siguientes pasos:

1. Incluir en la cabecera el script en cuestión:

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.replacefonts.js"></script>

2. Llamar a la función con el selector que nosotros deseemos. Para este ejemplo tomaremos todos los contenedores con la clase “titulo”:

   <script type="text/javascript"><!--
      $(".titulo").replacefonts();
   --></script>

Ya tenemos el script funcionando, pero nos falta crear las imágenes que contienen los textos. Para ello emplearemos cualquier editor de imágenes sencillo (creo que vale hasta el mismísimo paint) y la función de capturar pantalla del sistema. Continuamos con los siguientes pasos:

3. Abrimos la página que estamos modificando con el explorador, pero añadiéndole al final de la URL lo siguiente: #dev. Esto hará que se muestre un recuadro rojo alrededor de los elementos de la clase “titulo” que no han cargado imagen, facilitando así la tarea de recorte.

   

4. Una vez hechas todas las capturas las guardamos. Por defecto el script va a buscar las imagenes a la carpeta img/titles/ y con extensión .gif. Esto se puede modificar en las primeras lineas del script. Y respecto al nombre que se ha de poner, si el elemento tiene el atríbuto ID lo empleará para generar el nombre, de lo contrario generará un nombre a partir del texto del contenido empleando solo las letras en minúsculas. Por ejemplo:

   HOTEL RESERVATION / Registration Deadline: 31/12/2010

   pasaría a ser:

   hotelreservationregistrationdeadline31122010.gif

Y esto es todo. Ventajas veo al usar este método:

• Si no esta habilitado javascript simplemente te deja el texto con la siguiente fuente disponible.
• La edición de imagenes se limita a capturar y recortar el area señalada en rojo, sin tener que reescribir todos los textos.
• Vemos realmente cómo va a quedar en la página antes de crear la imagen.
• Usando los nombres generados automáticamente, al cambiar el contenido del texto cambia la imagen. Así prevenimos que el texto real no coincida con el de la imagen.

Actualización: Más tarde encuentro este enlace: http://www.disenorama.com/articulos/reemplazo-de-textos-una-comparacion, donde explican varios métodos, pros y contras para realizar esto mismo. Como siempre, es muy difícil innovar en estas cosas.

Actualización: He actualizado el código. Ahora detecta si la fuente está instalada (gracias al código de Lalit) y no hace nada en caso afirmativo. Además, si el elemento a sustituir es un contenedor de enlace <A> para el evento mouseover establece la imagen con el mismo nombre acabado en ‘_hover’, simulando la pseudoclase :hover.

[Descarga: http://lab.daveruiz.net/jquery.replacefonts/jquery.replacefonts.js]

[Link: http://icant.co.uk/csstablegallery/]

Desde Webkit se han presentado una serie de mejoras para CSS que, sin duda, nos salvarian de más de un apuro a la hora de elaborar las hojas de estilo de una web:

• CSS Animation
• CSS Transforms
• CSS Transitions
• CSS Variables

Personalmente, lo que más me ha llamado la atención han sido las CSS Variables. Pienso que facilitaría muchísimo las modificaciones posteriores de las hojas de estilo (no he leido nada acerca de poder operar con ellas). Por otro lado, quizá sobre el tema de animaciónes y transiciones, ya que se aleja de la idea de lo que es maquetación web (sin mencionar lo que pasa cuando este tipo de novedades llega a las masas, ¡¡colorines y letras rebotando por todos lados!!).

Amén que llegue a buen puerto.

[Fuente: CSS3.info]