internet-explorer - regla - ttf para web
IE9 bloquea la descarga de fuente web de origen cruzado (13)
Esto me está volviendo loca.
Simplemente probando un sitio en IE9 y descubriendo que la versión ''en vivo'' 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:
Estoy usando el kit Font Squirrel @ font-face. Como puede ver, está bien en Firefox, Chrome e incluso IE9 cuando se ve una versión local del sitio.
La única diferencia entre las versiones local y en vivo es que la fuente se carga desde un dominio diferente en el sitio en vivo (configuré correctamente la política de dominios cruzados, como lo ilustra el hecho de que funciona en Firefox y Chrome).
No puedo recordar cómo era en IE8 (Microsoft, una vez más, no ha pensado en desarrolladores y ha instalado IE9 en la parte superior de IE8 sin opción de ejecutarlos simultáneamente)
El sitio está en http://enplanner.com para que pueda ver la fuente.
Cualquier ayuda sobre esto sería muy apreciada, gracias de antemano.
Editar: eliminé IE9 y descubrí que se ve exactamente igual en local y 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.
¡NO PROBADO!
Bit del archivo del sitio Nginx para permitir solo el acceso de origen a los archivos de fuentes si tu CDN no es público :-) Codificación feliz
location ~ /.(ttf|otf|eot|woff)$ {
Access-Control-Allow-Origin: *
}
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 el nodo raíz IIS seleccionado en el panel izquierdo y haga clic en el enlace "Agregar ..." en el panel Acciones a la derecha. Esto mostrará el siguiente diálogo. Agregar woff file extension y especifique " application / x-font-woff " como el tipo MIME correspondiente.
Uso estas instrucciones en este sitio ( Robòtica educativa ), convierto mi fuente .ttf original en ( http://www.font2web.com/ )
Después de notar este error en la consola (F12): @font-face failed cross-origin request. Resource access is restricted @font-face failed cross-origin request. Resource access is restricted . Descubrí que mi navegador (IE11, emulación: IE9) " bloqueaba 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.
En cuanto a la respuesta de meanstreakuk anterior, me gustaría complementar. Tuvimos el mismo problema y buscamos qué hace Google Web Font. Entonces, ponemos nuestro htaccess, esto:
Conjunto de encabezado Access-Control-Allow-Origin "*"en lugar de nuestro dominio Si el asterisco, como lo hace Google, funciona todo el tiempo.
Encontré una solución. Se agregó esto a htaccess.
BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
IE9 es compatible con .WOFF; IE8 no lo hace, y solo admite fuentes .EOT.
Abra las Herramientas de desarrollo 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 de Access-Control-Allow-Origin Permiso en sus archivos WOFF. También se entregan con el tipo MIME incorrecto ( text/plain ) aunque eso no está causando su problema. Sin embargo, el hecho de no asignar woff al tipo MIME correcto puede causar problemas ya que algunos servidores no servirán archivos con extensiones "indefinidas" y en su lugar devolverán un error HTTP/404 .
Intenté todo, desde modificar mi configuración de apache y archivos .htaccess sin suerte. En las herramientas de desarrollo de IE me encontré con "Document Mode" y el valor predeterminado era IE7. Entonces, después de investigar, encontré esta metaetiqueta:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Ahora IE 10 y 9 formatean mi sitio web correctamente y muestran todos los iconos de Font Awesome correctamente.
Espero que ayude...
No se olvide de incluir .svg; esto puede ser necesario en algunos casos. Al 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>
OK, esto es lo que funcionó. Coloque la siguiente sección en su configuración de Apache para el host al que le está sirviendo las fuentes desde:
<FilesMatch "/.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mydomain.com"
</IfModule>
</FilesMatch>
Reemplace ''midominio.com'' con su propio dominio o * (pero tenga cuidado al usar * ya que esto significa que cualquier persona puede usar su CDN)
El ''| woff'' fue lo que había olvidado. Doh!
Para IIS Agregue las líneas a continuación ... 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>
Para implementar en ASP.Net puede usar esta sintaxis
Response.AppendHeader("Access-Control-Allow-Origin", "*");
También vale la pena señalar que si sus activos están alojados en Amazon AWS S3, no podrá configurar los encabezados que envía el servidor. En su lugar, deberá configurar los valores de CORS en su depósito, según estas instrucciones:
Una solución alternativa para usar el encabezado Access-Control-Allow-Origin es incrustar la fuente en su CSS utilizando data: