IE9 blocks descarga de fuente cross-origin web


Esto me está volviendo loco.

Simplemente probando un sitio en IE9 y descubrí que la versión 'live' está renderizando una fuente web que estoy usando más pequeña que en la versión dev.

Aquí hay una selección de capturas de pantalla:

introduzca la descripción de la imagen aquí

Estoy usando el kit Font Squirrel @font-face. Como se puede ver, está bien en Firefox, Chrome e incluso IE9 al ver una versión local del sitio.

La única diferencia entre las versiones local y live es que la fuente está siendo cargado desde un dominio diferente en el sitio en vivo (he configurado la política de dominios cruzados correctamente, como se ilustra por el hecho de que funciona en Firefox y Chrome).

No puedo recordar cómo se veía en IE8 (Microsoft, una vez más, no he pensado en los desarrolladores y han instalado IE9 sobre la parte superior de IE8 sin opción para ejecutarlos simultáneamente)

El sitio está en http://enplanner.com para que pueda ver la fuente.

Cualquier ayuda en esto sería muy apreciada - Muchas gracias de antemano.

Edit: He eliminado IE9 y descubrí que se ve exactamente igual tanto en local como en vivo en IE8. Parece que IE8 tiene un motor de renderizado superior que está más cerca de FF / Chrome que IE9. Este es un descubrimiento bastante deprimente.

Author: Barna Tekse, 2011-02-21

13 answers

Soporta IE9 .WOFF; IE8 no lo hace, y solo lo soporta .Fuentes EOT.

Abra las herramientas de desarrollador IE9 F12 y verá los siguientes mensajes:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

Al examinar sus encabezados HTTP, está claro que su acceso entre dominios no está configurado correctamente, ya que no hay un encabezado de respuesta Access-Control-Allow-Origin en sus archivos WOFF. También se entregan con el tipo MIME incorrecto (text/plain) aunque eso no está causando tu problema. Sin embargo, si no se asigna woff al tipo MIME correcto , puede causar problemas ya que algunos servidores no sirven archivos con extensiones "undefined" y en su lugar devolverán un error HTTP/404.

 60
Author: EricLaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-12 07:24:51

OK, esto es lo que funcionó. Coloque la siguiente sección en su configuración de Apache para el host desde el que está sirviendo las fuentes:

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

Sustitúyase "mydomain.com' con tu propio dominio o * (pero ten cuidado usando * ya que esto significa que cualquiera puede usar tu CDN)

El '|woff' era lo que había olvidado. Doh!

 34
Author: Dan Herd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 14:33:00

Para IIS Añádanse las líneas siguientes....funciona como un encanto


<system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>
 8
Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-15 16:47:10

Con respecto a la respuesta de meanstreakuk anterior, me gustaría complementar. Tuvimos el mismo problema y buscamos lo que hace Google Web Font. Por lo tanto, ponemos en nuestro htaccess, esto:

Header set Access-Control-Allow-Origin " * "
en lugar de nuestro dominio. Si el asterisco, como hace Google, funciona todo el tiempo.
 7
Author: maufarinelli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-20 21:08:06

Compruebe si puede abrir en IE el archivo (your-web.com/your-font.woff), Si recibe el error 404 vaya a IIS, haga doble clic en la opción de configuración" Tipos MIME "mientras tiene seleccionado el nodo raíz de IIS en el panel izquierdo y haga clic en" Agregar..."enlace en el panel de Acciones a la derecha. Esto abrirá el siguiente diálogo. Añadir . woff extensión de archivo y especifique " application/x-font-woff" como el tipo MIME correspondiente.

Utilizo estas instrucciones en este sitio (Robòtica educativa ), convierto mi original .ttf font on ( http://www.font2web.com/)

 3
Author: Gabri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-19 08:46:53

Encontré una solución. Agregó que esto htaccess.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
 3
Author: sudo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 00:49:24

Una solución alternativa al uso del encabezado Access-Control-Allow-Origin es incrustar la fuente en su CSS usando data:.

 3
Author: Jonathan Aquino,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 20:52:24

También vale la pena señalar que si sus activos están alojados en Amazon AWS S3, no podrá establecer los encabezados que envía el servidor. En su lugar, deberá configurar la configuración de CORS en su bucket, según estas instrucciones:

 1
Author: douglasr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-25 18:59:15

No olvides incluir .svg -- esto puede ser necesario en algunos casos. Agregarlo resolvió el problema en IE 11

<FilesMatch "\.(eot|otf|svg|woff|ttf)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
 1
Author: Eric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-05 23:21:26

Para implementar en ASP.Net puede utilizar esta sintaxis

Response.AppendHeader("Access-Control-Allow-Origin", "*");
 0
Author: Don Rolling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-21 20:58:45

He intentado todo, desde modificar mi configuración de apache, y .archivos htaccess sin suerte. En las herramientas de desarrollo de IE me topé con "Modo de documento" y el valor predeterminado era IE7. Así que después de algunas investigaciones encontré esta meta etiqueta:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Ahora IE 10, y 9 formatear mi sitio web correctamente y mostrar todos los iconos Impresionante Fuente correctamente.

Espero que eso ayude...

 0
Author: prodigerati,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-19 21:13:28

NO PROBADO!
Nginx site file bit para permitir el acceso de just origin a los archivos de fuentes si su CDN no es pública: -) Happy coding

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}
 0
Author: James Harrington,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-07 14:25:20

Después de notar este error en la consola (F12): @font-face failed cross-origin request. Resource access is restricted Descubrí que mi navegador (IE11, emulación: IE9) " bloqueó el contenido para ayudar a proteger mi privacidad". Al desbloquear el contenido-haga clic en el signo junto a la url - funcionó como debería.

 -3
Author: Frank,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-29 13:44:16