由于缓存控制标头，如何绕过 Internet Explorer 11 忽略我的字体？

Question

问题：

IE11 不使用我的 Roboto 字体或我的 Material Icon 字体。 我已将问题缩小到缓存控制。 当我从web.config中删除以下内容时，IE11 会像任何其他浏览器一样显示我的 fonts 和图标。 我在这里找到了这个解决方案https://stackoverflow.com/a/37270083/10316412

<add name="Cache-Control" value="no-cache" />
<add name="Pragma" value="no-cache" />

但是，我更不想删除它。 我们的安全扫描要求我们没有缓存。 由于子资源的完整性，我们也不应该链接到外部字体/图标...这就是为什么我将 fonts 和图标下载到我的资产文件夹中的原因。

我的问题：

为什么缓存控制会影响我的 fonts 无法加载？ 我怎样才能解决这个问题？ 我可以为我的资产文件夹指定没有缓存控制标头吗？

字体代码供参考：

@font-face {
  font-family: "Roboto";
  src: url(./assets/fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family: "Roboto-Light";
  src: url(./assets/fonts/Roboto/Roboto-Light.ttf);
}

@font-face {
  font-family: "Roboto-Medium";
  src: url(./assets/fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
  font-family: "Roboto-Bold";
  src: url(./assets/fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
  font-family: "Roboto-Italic";
  src: url(./assets/fonts/Roboto/Roboto-Italic.ttf);
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(assets/google-icons/font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"),
    url(assets/google-icons/font/MaterialIcons-Regular.ttf) format("truetype"),
    url(assets/google-icons/font/MaterialIconsOutlined-Regular.otf) format("opentype"),
    url(assets/google-icons/font/MaterialIconsRound-Regular.otf) format("opentype"),
    url(assets/google-icons/font/MaterialIconsSharp-Regular.otf) format("opentype"),
    url(assets/google-icons/font/MaterialIconsTwoTone-Regular.otf) format("opentype");
}

Answer 1

1. 为什么cache-control会影响我的fonts不加载？

我找到了一个详细解释问题的博客。 我认为作者在博客中说的原因是有道理的：

• IE 从服务器请求字体。
• 一旦服务器开始交付资源，IE 就会关闭连接。 可能是因为它突然检测到它应该从缓存中获取资源。
• 这种行为显然会破坏缓存内容。 所以IE无法访问字体。
• IE 尝试检索下一个声明的字体，但使用相同的错误模式。
• 最后，这一切都导致没有字体和一个凌乱的 web 站点。

2. 我怎样才能解决这个问题？ 我可以为我的资产文件夹指定没有缓存控制标头吗？

该问题的解决方法与您发现的一样：删除no-cache header。

关于为不同的文件指定不同的标题，我认为亚历克斯的评论是对的。 您还可以参考此线程中接受的答案，以使用 web.config 中的<location>元素和path属性来实现您想要的。

Answer 2

正如整篇文章所提到的，删除缓存控制和杂注标头肯定会解决问题。 但是我有一些要求来保留这些标题。 虽然我没有直接解决这个问题，但这就是为我解决的方法 -

我们的应用程序部署到使用 Azure 前门的 Azure 应用服务。 我相信前门会用它自己的标题覆盖一些标题，所以当我将它部署到有前门的环境时，问题完全消失了。

我还应该提到我确实尝试了<location>和path建议，但这些对我不起作用。