由于 cache-control headers，如何绕过 Internet Explorer 11 忽略我的 font-face？

Question

问题：

IE11 不使用我的 Roboto font-face 或我的 Material 图标 font-face。我已将问题缩小到 cache-control。当我从 web.config 中删除以下内容时，IE11 会像其他浏览器一样显示我的字体和图标。我在这里

找到了这个解决方案

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

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

我的问题：

为什么 cache-control 会影响我的字体无法加载？我该如何解决这个问题？我可以指定资产文件夹没有 cache-control headers 吗？

font-face代码参考：

@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 会影响我的字体无法加载？

我发现 a blog 详细解释了问题。我觉得作者在博客里说的有道理：

IE requests the font from the server.

As soon as the server starts delivering the resource, IE closes the connection. Probably because it suddenly detects that it should get the resource from cache.

This behaviour apparently destroys the cache content. So IE can’t access the font.

IE tries to retrieve the next declared font but with the same wrong pattern.

At the end it all leads to no font and a messy web site.

2。我该如何解决这个问题？我可以指定资产文件夹没有 cache-control header 吗？

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

关于为不同的文件指定不同的header，我认为Alex的评论是正确的。您还可以参考 this thread 中已接受的答案，使用 <location> 元素和 web.config 中的 path 属性来实现您想要的。

Answer 2

正如在整个 post 中提到的， 删除 cache-control 和 pragma headers 确实解决了问题 。但是我有一定的要求来保留这些 headers。虽然我没有直接解决这个问题，但这是为我解决的方式 -

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

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

由于 cache-control headers，如何绕过 Internet Explorer 11 忽略我的 font-face？

How to get around Internet Explorer 11 ignoring my font-face due to cache-control headers?

css

internet-explorer

azure

angular