Este artículo fue originalmente publicado en Cristalab, un portal dónde colaboro ocasionalmente.
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.
Vamos a necesitar agregar la siguiente linea al elemento que queramos que le afecte.
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. Aquí un ejemplo:
h2, p { font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif; letter-spacing: 0; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop); zoom:1; }
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.
<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:
$(document).ready(function(){ $("h2, p").ieffembedfix(); });
Por último puedes cambiar los selectores "h2" y "p" de acuerdo a tus necesidades.
Copyright © 2012-2013 AbarcaRodriguez.com