Entradas

Fuentes Cufon con IE8 – Problema y solución

Utilizar fuentes de texto originales en títulares de secciones o de bloques es una práctica muy de moda en los nuevos diseños web. De este modo, huímos un poco de las tradicionales fuentes en web como la Arial, Helvetica o Georgia para textos destacados y en consecuencia, dando un toque mas moderno y actual a nuestro site.

Para insertar diferentes tipos de fuentes en nuestra web existen muchas opciones. Una muy extendida es utilizar fuentes CUFON. Muchas son gratuitas y otras de pago, pero gracias a ellas puedes conseguir textos de impacto sin penalizar la visibilidad de tu web para los tan importantes buscadores.

El hecho de utilizar CUFON u otros elementos de fuentes de texto mejoradas para tu blog o web tiene un efecto visual importante …

pero al acceder a la web con un navegador Internet Explorer 8 nos dará algun quebradero de cabeza ya que se duplica el texto.

Alternativa

Para evitar que se vea un efecto similar a la superposicion y duplicado de texto lo mejor es que insertes la siguiente línea en el fichero footer.php (de tu WordPress) justo despues de la llamada a la función wp_footer() como se indica

</div><!– end #footer –>

<?php wp_footer(); ?>
<![if !(IE 8)]>
<script type=”text/javascript”>Cufon.replace(‘h1′, { fontSize: ’50px’ , fontFamily: ‘Pacifico’, } );</script>
<![endif]>
</body>
</html>

Si ponemos esta linea en el <head> de la página, puede generarnos algún conflicto con otros módulos por lo que aseguramos que sea lo que sea que se ejecute, al final acabará cargando la excepción donde se indica:

<![if !(IE 8)]>  (Si usuario que visita la web no lo hace con un Internet Explorer 8, entonces ejecutará el script que cargará nuestra fuente cufon… En el caso de nuestra lacasadelaswebs.com es la “Pacífico”)

Estas líneas de código, solo van a evitar que se duplique el texto. En IE8 se mostrará la web con las fuentes preestablecidas. Para fortuna de todos los usuarios de Internet Explorer, en la versión 9 del navegador, ya esta solucionada esta funcionalidad por lo que podrán ver la web tal y como la diseñamos.

 

Probar tu web en diferentes versiones de Navegador con Google Chrome

Para que tus desarrollos web se visualicen correctamente en un dispositivo móvil o en ordenadores con diferentes navegadores es conveniente utilizar herramientas que te permitan desarrollar y ajustar tu diseño web a todos y cada uno de los posibles modos de visualización y acceso de tus visitantes.

Esta parte puede ser muy tediosa y mas si sabes que tienes que pensar en tener todos y cada uno de los programas que necesitas para que te permitan hacer esta prueba de tu web para los diferentes navegadores.

Imagina tener que instalar Internet Explorer 8 y 9, Firefox, Opera, Safari, Chrome y ademas tener un dispositivo con Iphone, Ipad, Android , Blackberry, etc… una locura.

Truco con Google Chrome

Pues bien, con Google Chrome puedes hacer las simulaciones a tu gusto.

    1. Para ello entra en el modo de desarrollador en la página que desees ver en diferentes navegadores. (Ctrl + Shitf + I)
    2. Una vez ahí, haz clic en el icono de configuración del depurador que aparece abajo a la derecha

    1. * En la pestaña de “User Agent” selecciona el tipo de navegador que quieres emular. No te olvides de marcar la opción “Override User Agent” para que funcione

simula-otro-navegador-web-ipad-con-google-chrome - lacasadelaswebs.com

  1. * Por último, vuelve a recargar la página.

Además, si entras en las herramientas de desarrollador que aparecen en la parte superior de tu Google Chrome, verás que dispones de un montón de opciones que te van a permitir depurar tu web para que sea 100% compatible.

¿Cómo hacer para que Skype no reemplace los teléfonos en tu página web?

Como bien sabes, Skype, atraves de su software detecta los números de teléfono que hay en las páginas web por las que navegamos desde nuestro equipo y nos muestra los teléfonos de manera resaltada para poder realizar una llamada al pulsar sobre éstos.

Trucos - Lacasadelaswebs.com - Skype quitar reemplazo teleféfonos diseño webA veces, esta funcion puede hacer que nuestro diseño web se vea alterado y que el formato de visualización no sea el que nosotros habíamos dibujado en un inicio para nuestra web.

Solución

Para que no se muestre este enlace y la web se muestre como la diseñaste, lo mejor es insertar la siguiente línea en la zona del <head> de tu web:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Otra opción

La otra opción es esperar a que los usuarios eliminen esa opción de la configuración de su Skype….. (complicado ya que esta opción viene por defecto), así que lo mejor, es que si detectamos que nuestra web no se visualiza correctamente por culpa de esta función de Skype, lo mejor será forzar un reset de estilos como el indicado.