En IE CSS font-face funciona solo cuando se navega a través de enlaces internos

Nuestro diseñador web ha creado un CSS con la siguiente fuente-cara:

@font-face { font-family: 'oxygenregular'; src: url('oxygen-regular-webfont.eot'); src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'), url('oxygen-regular-webfont.woff') format('woff'), url('oxygen-regular-webfont.ttf') format('truetype'), url('oxygen-regular-webfont.svg#oxygenregular') format('svg'); font-weight: normal; font-style: normal; } 

Funciona bien en IE y Firefix. Pero hay un problema: en IE, las fonts se representan correctamente solo cuando navego por la página usando enlaces de páginas web internas. Si presiono el botón Actualizar o Atrás, las fonts se reemplazan por la fuente predeterminada (Times New Roman).

Actualmente, el sitio web usa HTTPS, pero se observó el mismo problema al usar HTTP.

Cuando navego usando enlaces de sitios web internos, en la pestaña Red de las herramientas de desarrollo de IE (Shift – F12), veo lo siguiente:

 /Content/oxygen-regular-webfont.eot? GET 200 application/vnd.ms-fontobject 

Cuando uso los botones Refresh / Back, también hay dos entradas más para las otras fonts:

 /Content/oxygen-regular-webfont.woff GET 200 application/x-font-woff /Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream 

El archivo CSS se está cargando de la siguiente manera:

 /Content/site.css GET 200 text/css 

Traté de eliminar tanto woff como ttf, así que tuve lo siguiente:

 @font-face { font-family: 'oxygenregular'; src: url('oxygen-regular-webfont.eot'); src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } 

Pero aún IE se comporta de la misma manera (excepto que ya no descarga woff y ttf): muestra fonts de respaldo incorrectas cuando navega por Atrás / Actualizar.

¿Cómo hago que IE cargue las fonts correctas en las acciones Refresh / Back?

Encontré una solución pero no veo el motivo por el que funciona (bueno, solo una razón, es IE: D).

Lo que hice fue poner el mismo sitio en Apache y probar nuevamente. En Apache, las fonts funcionaban bien incluso cuando se usaba el botón Actualizar. Luego en el inspector de red vi que Apache está devolviendo 304 en lugar de 200 para el archivo eot y me golpeó, así que es un problema de almacenamiento en caché. Fui a mi aplicación ASP.NET y, por supuesto, por razones de seguridad (y también para evitar el almacenamiento en caché de las solicitudes AJAX), alguien había desactivado cada almacenamiento en caché que podía imaginar:

  // prevent caching for security reasons HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false); HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1)); HttpContext.Current.Response.Cache.SetValidUntilExpires(false); HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); HttpContext.Current.Response.Cache.SetNoServerCaching(); // do not use any of the following two - they break CSS fonts on IE HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); HttpContext.Current.Response.Cache.SetNoStore(); 

Tan pronto como comencé a comentar las dos últimas líneas de código, de repente las fonts comenzaron a funcionar sin problemas en IE. Así que supongo que la respuesta es: IE no puede cargar la fuente si no está en la memoria caché. Sin embargo, no tengo idea de por qué el problema ocurre solo al refrescar / navegar hacia atrás.

Editar – Solución alternativa

En lugar de comentar esas dos últimas líneas

  // do not use any of the following two - they break CSS fonts on IE HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); HttpContext.Current.Response.Cache.SetNoStore(); 

Cambie SetAllowResponseInBrowserHistory a true lugar:

 HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true); 

Esto todavía debería permitir no-caché con la excepción de la navegación hacia atrás y hacia adelante como yo lo entiendo. MSDN – SetAllowResponseInBrowserHistory Method

Me he enfrentado con el mismo problema.

En caso de que si el encabezado del archivo .eot contiene Cache-Control: valor no-cache , IE9 no carga la fuente correctamente. Dev Tools arrojó Result – 200, pero la columna Received mostró 400B, en el mismo tiempo Content-Length fue de 70 Kb. He utilizado el siguiente valor Cache-Control: max-age = 0 , para solucionar el problema.

Acabo de tener el mismo error, y para aquellos que quieren tener una solución pura (no relacionada con la tecnología exacta): deben asegurarse de que los encabezados de fuente que están enviando no estén diciendo no-cache . Además de lo escrito anteriormente, en realidad hay dos encabezados que pueden hacerlo:

 "cache-control: no-cache" 

y

 "pragma: no-cache" 

Ambos dicen que el navegador es el mismo, el primero es parte de HTTP1.1, el segundo es más antiguo (HTTP1.0).

Ahora, soluciones:

  • Si realmente desea servir las fonts (y otros archivos?) Sin caché del lado del cliente, configure "cache-control" to "max-age=0" ; puedes soltar el encabezado pragma, está obsoleto (o establecerlo en "pragma: cache" ).
  • Si realmente desea tener el almacenamiento en caché: elimine no-cache valores no-cache y establezca la edad máxima adecuada (por ejemplo, "cache-control: max-age=3600" – caché de una hora). Pragma se puede establecer en "pragma: cache" o eliminar por completo.

Encontré una solución alternativa para resolver este problema.

He incrustado la fuente directamente en la hoja de estilo en lugar de cargarla como un archivo de fuente separado. Esto funciona absolutamente bien en todos los navegadores, incluidos Windows, Mac, iOS, Android, etc. y ayuda a reducir el número de solicitudes HTTP en la página web.

Esto no requerirá ningún cambio en el control de caché del encabezado.

@font-face { font-family: ''; src: url(data:application/x-font-woff;charset=utf-8;base64,) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,,) format('truetype'); font-weight: normal; font-style: normal; }

Puede utilizar el comando incorporado base64 en OS X o Linux para la encoding de fonts.

La respuesta de JustAMartin nos llevó a una solución diferente:

En lugar de comentar esas dos últimas líneas

  // do not use any of the following two - they break CSS fonts on IE HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); HttpContext.Current.Response.Cache.SetNoStore(); 

Agregamos la siguiente línea:

 HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true); 

Esto todavía debería permitir no-caché con la excepción de la navegación hacia atrás y hacia adelante como yo lo entiendo. MSDN – SetAllowResponseInBrowserHistory Method

Eliminar la respuesta global Las configuraciones de NoCache y NoStore arreglarán las fonts, pero si necesita esas configuraciones, obviamente esa no es una respuesta.

Según entiendo, solo configurar el caché para que caduque no evitará consistentemente la visualización de páginas en caché; fuerza una comprobación al servidor, pero si la página no se modifica (respuesta 304) puede (normalmente?) mostrar la versión en caché.

(De hecho, al leer esto, ahora se me ocurrió que configurar el caché del cliente para caducar inmediatamente en combinación con SetNoServerCaching podría obligar a la página del cliente a renovar siempre; sin embargo, parece que podría tener implicaciones de rendimiento).

He descubierto que en ASP.NET MVC utilizando el atributo OutputCacheAttribute en un controlador para deshabilitar el almacenamiento en caché no se rompen las fonts de IE.

 [OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)] public class FooController : Controller { ... } 

Me doy cuenta de que NoStore no es lo mismo que SetCacheability (HttpCacheability.NoCache), pero parece funcionar para este propósito.

Puede crear un controlador base con el atributo heredado para hacer que el código sea más limpio.

Asegúrese de que no se trata de una cuestión de ruta, es decir, su archivo CSS es relativo a dónde están las fonts. En su caso, necesita su archivo CSS en la misma carpeta que sus archivos de fonts.

No configure el Encabezado de solicitud variable en https

Sin carga de fonts

 Vary:Accept-Encoding,https 

Trabajos

 Vary:Accept-Encoding 

La configuración del encabezado de la memoria caché es necesaria para evitar la carga diferida de la fuente .