internet-explorer - consolas - include google font
IE9-CSS3111: @ font-face encontró un error desconocido (6)
Incruste tres fuentes de Google de http://www.google.com/webfonts (Dosis, Open Sans, Lato)
Y todos funcionan bien, excepto IE9, donde se devuelve:
CSS3111: @font-face encountered unknown error.
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot
CSS3111: @font-face encountered unknown error.
KlmP_Vc2zOZBldw8AfXD5g.eot
CSS3111: @font-face encountered unknown error.
zLhfkPOm_5ykmdm-wXaiuw.eot
Y rompe el sitio web completo de vez en cuando.
¿Qué se puede hacer para resolver esto?
Al comentar la segunda declaración de fuente para la fuente EOT funcionó para mí. Asegúrate de hacer la primera declaración justo arriba de "src: url (" ../ fonts / webfonts / Helvetica Neue.eot ");"
Probado en Chrome, Firefox, Sarafi, IE9-10-11.
@font-face {
font-family: ''Helvetica Neue'';
font-style: normal;
font-weight: 400;
src: url("../fonts/webfonts/Helvetica Neue.eot");
src: local("Helvetica Neue"), local("Helvetica Neue"),
/*url("../fonts/webfonts/Helvetica Neue.eot?#iefix") format("embedded-opentype"),*/
url("../fonts/webfonts/Helvetica Neue.woff2") format("woff2"),
url("../fonts/webfonts/Helvetica Neue.woff") format("woff"),
url("../fonts/webfonts/Helvetica Neue.ttf") format("truetype"),
url("../fonts/webfonts/Helvetica Neue.svg") format("svg"); }
Encontré esta respuesta, que aborda la pregunta más directamente que la respuesta aceptada, que realmente, no debería haber sido la respuesta :)
Y ahora a nuestro destaque principal: "CSS3111: @ font-face encontró un error desconocido". Este error es muy ambiguo. Si vuelve a mirar MSDN, verá que su descripción dice: "Se encontró un problema desconocido con" Web Open Font Format (WOFF) "y" Embedded OpenType font (EOT) "de las hojas de estilo en cascada ( CSS) font ". El "problema desconocido" no suena demasiado bien para mí, ¿cómo se supone que voy a resolver un problema desconocido? Afortunadamente nos dan una pista aquí. Dice: "Verifique la fuente de las fuentes". De hecho, CSS3111 generalmente es causado por un problema con la fuente binaria de la fuente. Uno de los populares convertidores en línea TTF a EOT, por ejemplo, produce archivos EOT con una tabla NAME que no cumple con los estándares de Microsoft, lo que da como resultado fuentes EOT que nunca se cargan en IE y producen el error CSS3111. Por lo tanto, cuando experimente un CSS3111, siempre es bueno intentar usar un convertidor diferente de TTF a EOT o generador de cara de fuente.
Este error también puede ocurrir cuando utiliza las fuentes desubroutinize d, que ninguna versión de Internet Explorer parece ser capaz de manejar.
Si está generando sus archivos de fuentes usando pyftsubset del paquete fonttools , asegúrese de no configurar el indicador --desubroutinize .
Hemos encontrado que obtienes el mismo error debido a una nueva política de Windows 10. Si su error ocurre en Windows 10 + IE11, la solución puede ser esta:
IE 11: error CSS3111 en mi propio código, y google.com/fonts no muestra ninguna fuente
Resolví el problema en IE 9 usando la siguiente @font-face :
@font-face {
font-family: Gidole;
src: url(''Gidole-Regular.woff2'') format(''woff2''),
url(''Gidole-Regular.woff'') format(''woff'');
}
con suerte la siguiente nota te será útil:
Si sus fuentes están ubicadas en un servidor remoto (un CDN, por ejemplo) no se procesarán correctamente en todos los navegadores. Eso es parcialmente cierto. Sí, sin un encabezado explícito de "Access-Control-Allow-Origin", Firefox e Internet Explorer no mostrarán tus webfonts (si presionas F12 para abrir Developer Tools en IE y vas a la pestaña Console, obtendrás el CSS3117 : @ font-face falló la solicitud de origen cruzado. Acceso a los recursos está restringido. Error) Eso es simplemente porque IE y Firefox no permiten fuentes entre dominios por defecto. Por otro lado, Google Chrome cargará las fuentes sin problemas y si no conoce el problema del origen cruzado, la depuración puede ser realmente frustrante. Aunque personalmente prefiero colocar mis fuentes también en el mismo dominio, puede colocarlas en una ubicación remota y cargarlas satisfactoriamente en todos los navegadores, siempre que agregue esta declaración a su archivo .htaccess principal:
<FilesMatch "/.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://mydomain.com" </IfModule> </FilesMatch>