Comunidad de diseño web y desarrollo en internet online

Fuentes con calidad en IE7 e IE8 usando font-face y jQuery

Si has utilizado font-face para utilizar tus propias fuentes al momento de desarrollar un sitio web, seguramente te has encontrado con el inconveniente de ver tus fuentes en IE7 e IE8 con una calidad muy baja y con un detallado pésimo, cuando en otros navegadores se ve suave y estilizada.

Esto es debido a un filtro que utilizan estos navegadores llamado ClearType, que se supone que ayuda a mejorar las fuentes, pero hace todo lo contrario con fuentes personalizadas.




En allcreatives nos cuentan una solución para poder deshabilitar este filtro, y también veremos la opción de realizar este proceso con un plugin de jQuery.

Filtro directo al CSS


Vamos a necesitar agregar la siguiente linea al elemento que queramos que le afecte.

Código :

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;

Y vamos a descargar y añadir esta imagen en el directorio donde estemos modificando nuestro archivo.

Ejemplo

Código :

h2, p {
       font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;
       letter-spacing: 0;
       filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
       zoom:1;
}


Filtro automático con jQuery


Igualmente en allcreatives nos ofrecen la opción de realizar este proceso con un plugin de jQuery.

Primero necesitaremos descargar el siguiente archivo: IE @font-face ClearType fix V0.1

Necesitaremos la versión de jQuery 1.4 o superior y lo insertaremos de la siguiente manera.

Código :

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

Y para hacer el llamado lo hacemos de la siguiente manera.

Código :

<script type="text/javascript">
    $(document).ready(function(){
 
        $("h2, p").ieffembedfix();
 
    });
</script>

Por último puedes cambiar los selectores "h2" y "p" de acuerdo a tus necesidades.

Resultado final


Podemos ver en la siguiente comparación el antes y el después de utilizar el filtro. Es una buena solución para los que seguimos desarrollando para versiones inferiores de IE9.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate