时间戳

首页 > 解决方案 > 由于缓存控制标头，如何绕过 Internet Explorer 11 忽略我的字体？

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

问题描述

问题：

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

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

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

我的问题：

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

字体代码供参考：

@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");
}

标签： cssangularazureinternet-explorer

解决方案

1. 为什么缓存控制会影响我的字体无法加载？

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

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

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

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

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

推荐阅读