css - pagina - Las fuentes de iconos no se cargan en IE11

insertar iconos en html

Question

Estamos usando icomoon para nuestras fuentes de iconos, y funcionan bien en Chrome y Firefox, pero no se muestran en IE11 ... A veces. Parece funcionar en la carga de la primera página, pero no en las cargas de página posteriores. Borrar el caché no parece restablecerlo. Este problema puede estar presente en otras versiones de IE, ahora mismo nos estamos centrando en IE11.

Aquí está nuestra @ font-face:

@font-face {
font-family: ''icon'';
src:url(''fonts/icon.eot?-3q3vo5'');
src:url(''fonts/icon.eot?#iefix-3q3vo5'') format(''embedded-opentype''),
    url(''fonts/icon.woff?-3q3vo5'') format(''woff''),
    url(''fonts/icon.ttf?-3q3vo5'') format(''truetype''),
    url(''fonts/icon.svg?-3q3vo5#rezku'') format(''svg'');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: ''icon'';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "/e600";
}
/* etc etc etc */

Pero aquí es donde se pone raro. Mirando las herramientas del desarrollador, se envía una solicitud HTTP para las fuentes, pero solo se reciben unos pocos cientos de bytes (probablemente solo los encabezados).

Pero la respuesta HTTP enumera la longitud del contenido correctamente como varios kilobytes.

La pestaña "Cuerpo de respuesta" solo dice "No hay datos para ver".

Puede ver en la captura de pantalla del Panel de red que las fuentes de Google no se comportan así.

Al pegar la URL en la barra de ubicación, se descarga el archivo completo.

Answer 1

Después de investigar el mismo problema y revisar varias soluciones publicadas en línea, he creado la siguiente lista de solución de problemas, que cubre la mayoría de las causas potenciales:

1. Las descargas de fuentes están deshabilitadas en IE, en Opciones de Internet / Seguridad / Nivel personalizado / Descargas de fuentes habilitadas / deshabilitadas. Su administrador de red puede deshabilitarlos, en cuyo caso no podrá ver ni cambiar esta configuración.
2. Sus encabezados HTTP evitan que IE almacene el archivo de fuente localmente. Para solucionarlo, elimine cualquier Cache-Control: no-store, no-cache o Pragma: no-cache headers, o cualquier encabezado Expires con una fecha en el pasado. Además, el encabezado Vary tiene sus trucos en IE, si se establece en algo que no sea Accept-Encoding , User-Agent , Host o Accept-Language , IE no almacenará en caché nada, a menos que también haya un encabezado ETAG (consulte esta publicación de blog de MSDN ) .
3. No establece los tipos MIME correctos para la descarga de la fuente. Por ejemplo, Jetty 9 establecerá por defecto Content-Type: text/plain para los tipos de fuente habituales ( eot, woff, woff2 ). Consulte esta respuesta para conocer los tipos de contenido adecuados para usar.
4. Asegúrese de usar display: block o display: inline-block para su elemento de icono.
5. Finalmente, asegúrese de leer la guía de solución de problemas en FontAwesome.

Answer 2

En mi caso, estaba dañado el archivo de fuente .eot. Había generado uno nuevo (+ nuevos estilos .css) y solucionó el problema. Intentalo.

PD. Asegúrese de admitir EOT para IE en @ font-face, por ejemplo:

@font-face {
  font-family: "fontName";
  src:url("../../src/theme/fonts/fontName.eot");
  src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
  url("../../src/theme/fonts/fontName.woff") format("woff"),
  url("../../src/theme/fonts/fontName.ttf") format("truetype"),
  url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}

Answer 3

Este es el problema: https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

Básicamente, Microsoft nos está obligando a volver a usar hojas de sprites.

Answer 4

La sintaxis es correcta, sin embargo, puede haber un problema con la forma en que cualquier convertidor que solía convertir de .tff a .eof. Consulte este artículo para obtener más detalles sobre este tema en general http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

Mientras tanto, podría intentar probar el problema utilizando una fuente alojada por fuentes de Google. Digo esto porque Google maneja la compatibilidad entre navegadores sin problemas. Si resulta que la fuente de Google funciona, entonces sabes que es un problema con la forma en que se convirtió tu fuente y debes probar con otra. Por lo que entiendo, Font Squirrel es realmente bueno para generar fuentes compatibles con varios navegadores. Espero que esto ayude, buena suerte

Answer 5

Me enfrenté a un problema similar pero con los iconos de fuente Bootstrap (Glyphicons). Puedes probar si esto funciona:

(Generalmente en Windows 10) la configuración de IE-11 se ha cambiado para que no descargue ninguna fuente externa y use solo las fuentes disponibles en Windows. Este es el comportamiento predeterminado.

Sin embargo, podemos cambiar esta configuración en IE para permitirle descargar fuentes externas. Los siguientes son los pasos a seguir en IE: vaya a: Configuración >> Opciones de Internet >> Seguridad

Haga clic en "Internet" (o en cualquier zona que pueda estar usando) >> "Nivel personalizado ..."
A continuación, en "configuración de seguridad": habilite la "Descarga de fuentes". Por defecto estaría deshabilitado.

Recarga la página

Answer 6

Se encontró con un problema similar, y de la captura de pantalla anterior, la respuesta tiene un encabezado de Cache-Control de ''no-store''. IE parece tener problemas con el almacenamiento en caché y las fuentes.

La eliminación de los encabezados ''Cache-Control: no-store'' y "Pragma: no-cache" funcionó para que pudiéramos volver a mostrar las fuentes de íconos.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Answer 7

Tuve un problema similar y parece ser causado por IE que tiene dificultades con ciertas configuraciones de display y position en combinación con iconfonts.

Por lo general, debería funcionar usando:

element:before {
     display:block;
     position: absolute;
     ... your styles ...
}