Las fonts IE8 CSS @ font-face solo funcionan para: antes de que el contenido vuelva a aparecer y, a veces, en la actualización / actualización

ACTUALIZACIÓN: He escrito una publicación en el blog sobre lo que he aprendido sobre este tema. Todavía no lo entiendo del todo, pero espero que alguien lo lea y arroje algo de luz sobre mi problema: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

Tengo una página donde estoy usando @ font-face para importar una fuente personalizada para icons. Los icons se crean con una clase:

.icon {font-family: 'icon-font';} .icon:before {content: 'A';} 

Y listo, tengo el ícono que se usa para “A”. Bastante estándar, funciona en todos los navegadores, incluido IE8.

Sin embargo, en IE8, tengo un error extraño. Cuando se carga la página, la fuente no está funcionando. En lugar de icons, tengo cartas por todos lados. Una vez que sobrevivo la página (cuerpo), la mitad de las letras se convierten en íconos. El rest se convierte en íconos cuando me cierro sobre ellos.

ASÍ, la fuente de la cara se está incrustando correctamente. La familia de fonts y las propiedades de contenido funcionan, pero hay algo más que hace que los íconos se carguen solo después de desplazarse.

Entonces, hay algún tipo de error con @ font-face en IE8 cuando intenta usar la fuente con: before {content: ‘a’} pero no tengo idea de cuál es el error.

He buscado durante horas aquí por un error similar / problema IE8 / cualquier cosa, pero no he tenido suerte y estoy a punto de volverme loco. ¿Alguna sugerencia?

Avíseme si puedo proporcionarle más información que pueda ser útil.

EDITAR: actualizó el enlace roto en la publicación del blog.

Tuve el mismo error.

Lo arreglé ejecutando este script en domready (solo para IE8 por supuesto):

 var head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; style.styleSheet.cssText = ':before,:after{content:none !important'; head.appendChild(style); setTimeout(function(){ head.removeChild(style); }, 0); 

Esto permite que IE8 vuelva a dibujar todo :before y :after pseudo elementos

Recientemente me encontré con esto también y lo solucioné al incluir @ font-face dos veces en mi archivo CSS. La primera @ font-face es utilizada por IE y la segunda es utilizada por otros navegadores.

 @font-face { font-family: "SocialFoundicons"; src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"); font-weight: normal; font-style: normal; } @font-face { font-family: "SocialFoundicons"; src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg"); font-weight: normal; font-style: normal; } 

Fuente: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20

Estaba experimentando exactamente el mismo problema. En IE8, el ícono de la página web (usando pseudo-elementos) a veces renderiza la fuente de respaldo, pero cuando la colocas sobre ella, el icono de la fuente web aparece.

Los icons se implementaron usando: after y: before con soporte para IE7, así .

En mi caso, el proyecto está desarrollado en HTML5 y usa htmlshiv para admitir las nuevas tags HTML5 en navegadores más antiguos.

El problema se resolvió de manera ridícula colocando la etiqueta del script html5shiv debajo del CSS principal:

   

Estoy feliz ahora 🙂 ¡Espero que eso ayude!

Estaba teniendo un problema similar en el que la fuente no aparecía hasta que pasaba el cursor sobre el elemento principal. Pude solucionar este problema activando un evento de enfoque en los elementos padre.

element.parent (). trigger (‘foco’);

¡Espero que esto ayude a alguien!

Solución:

Encuentre la hoja de estilo y vuelva a cargar en el documento listo si IE8:

Muestra de HTML:

          

Muestra de JavaScript:

 // Reload stylesheet on document ready if IE8 if ($.browser.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); } 

Las soluciones anteriores no solucionaron el problema cuando IE8 se actualiza. También encontré algunos problemas donde agregar una hoja de estilo rompería la corrección de tamaño de fondo de IE8 backgroundsize.min.htc

Entonces esto es lo que hice:

Agregue la clase ie8 a la etiqueta html:

  

Agregue cargar la clase al cuerpo:

  

Anule el atributo de contenido CSS solo para IE8:

  

Ahora elimine la clase de carga en DOM listo:

 $( function() { $('body').removeClass('loading') } ); 

¡Ahora funciona!

Según la respuesta de @ausi, puede refactorizar esto con jQuery y CoffeeScript hasta 4 líneas:

 $(document).ready -> $style = $('') $('head').append $style setTimeout (-> $style.remove()), 0 

o con la syntax de JavaScript:

 $(document).ready(function() { var $style; $style = $(''); $('head').append($style); return setTimeout((function() { return $style.remove(); }), 0); }); 

Tuve un problema similar en Chrome. Aquí está mi solución:

 setTimeout(function(){ jQuery('head').append(''); },100); 

Mi suposición es que el estilo de pseudo css se procesó antes de que el WebFont estuviera listo, lo que dio como resultado glifos en blanco. Después de la página cargada, al pasar el cursor o al alterar el CSS de alguna forma, estos aparecían mágicamente. Entonces mi solución solo fuerza una actualización css que no hace nada.

Para mí, el problema simplemente se solucionó usando la statement !important en el atributo de contenido.

Es decir:

 .icon:before { content: "\f108" !important; } 

Muy bien, así que he estado tratando de solucionar este problema por un tiempo. Curiosamente, la demostración icomoon siguió trabajando en IE8, pero la mía nunca lo hizo, a pesar de que sentí que tenía prácticamente lo mismo en su lugar. Así que comencé a reducir todo (la demostración icomoon así como mi propia implementación) y encontré dos cosas que debían estar ahí para que esto funcionara.

Primero, descubrí que necesitaba mantener el cachebuster en el nombre del archivo.

Entonces en mi implementación tuve:

 @font-face { font-family: 'iconFont'; src:url('icon_font.eot'); src:url('icon_font.eot') format('embedded-opentype'), url('icon_font.woff') format('woff'), url('icon_font.ttf') format('truetype'), url('icon_font.svg') format('svg'); font-weight: normal; font-style: normal; } 

Pero lo que necesitaba era:

 @font-face { font-family: 'iconFont'; src:url('icon_font.eot?-v9zs5u'); src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'), url('icon_font.woff?-v9zs5u') format('woff'), url('icon_font.ttf?-v9zs5u') format('truetype'), url('icon_font.svg?-v9zs5u#icomoon') format('svg'); font-weight: normal; font-style: normal; } 

En segundo lugar, y este no tiene sentido, es que necesitaba algo en la hoja de estilo que tuviera un :hover pseudo selector :hover . No importa en qué está o cuáles son sus reglas, solo necesitaba algo y luego los íconos aparecerían cuando los pase sobre ellos.

Así que simplemente inserté [data-icon]:hover{} en mi hoja de estilo CSS (así sin reglas).

Desearía poder explicarte por qué funciona esto, pero no entiendo. Mi mejor suposición es que esto desencadena algún tipo de actualización en IE8 y hace que aparezcan los íconos.

Mi problema IE8 se resolvió quitando el doble punto en el selector de pseudo-elemento.

No muestra un ícono en IE8 …

 .icon::before { content: "\76"; } 

Muestra un ícono en IE8 …

 .icon:before { content: "\76"; } 

Ok, aquí hay una variación de la solución de @ ausi que he usado y que me ha funcionado. Esta solución proviene del comentario de Adam al final de este artículo http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

Pensé que lo pondría aquí en más detalle para que otros lo utilicen más rápido.

Establecer una clase extra, por ej. ie-carga-fix en la etiqueta html para IE8. Incluya todo su CSS y luego tenga un archivo JS condicional para IE8. Por ejemplo:

            ... 

Luego, en la parte superior de su archivo CSS principal, incluya algo como:

 .ie-loading-fix :before, .ie-loading-fix :after { content: none !important; } 

Luego en su archivo IE8 js/ie.js incluya lo siguiente:

 window.onload = function () { var cname = document.documentElement.className; cname = cname.replace('ie-loading-fix', ''); document.documentElement.className = cname; } 

Este JS eliminará el estilo ie-loading-fix que está ocultando todo :before y :after content y obligará a IE8 a volver a dibujar todo :before y :after content una vez que la página se haya cargado.

Esta solución solucionó un problema que tenía con Font Awesome v4.4 que con frecuencia cambiaba IE8 a Vista de compatibilidad o se bloqueaba a pesar de que estaba configurando explícitamente la página para cargarla en el modo Edge con la metaetiqueta.

Si no me equivoco, IE no lee fonts TTF, requiere fonts EOT

Hice algunas investigaciones según la respuesta @vieron y resulta que otra forma de solucionar este problema es bloquear el procesamiento de páginas durante unos milisegundos para que la fuente se pueda cargar antes del contenido. Sin embargo, bloquear la representación de la página no es la forma más inteligente de resolver esto, porque no se puede saber cuánto ms debes bloquear.

Lo probé poniendo el archivo php como archivo fuente para javascript.

  

block.php

  

Si tiene bibliotecas externas de JavaScript como HTML5shiv, esto sucede automágicamente, excepto que está ejecutando un sitio en la red local (intranet o localhost) con muy baja latencia y sin scripts antes del contenido.

Eso explica el hecho de que el problema no está más extendido y notado.

Realmente traté de encontrar una solución elegante, pero no puedo encontrar algo que excluya javascript o que bloquee el procesamiento de páginas para IE.

Esta es la solución, nos hemos enfrentado a este problema con IE7, IE8 e IE9 cuando usamos ajax

 setInterval(function(){ var $ss = $('#base-css'); $ss[0].href = $ss[0].href; },300);