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

Posted 2023-03-06

技术标签:

【中文标题】由于缓存控制标头，如何绕过 Internet Explorer 11 忽略我的字体？【英文标题】：How to get around Internet Explorer 11 ignoring my font-face due to cache-control headers? 【发布时间】：2021-06-16 05:32:15 【问题描述】：

问题：

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

【问题讨论】：

您可以拥有多个 web.config 文件，以及为您的“资产”文件夹单独控制位置特定设置。见：docs.microsoft.com/en-us/troubleshoot/aspnet/… 您好，请问这个问题呢？我下面的回答对解决这个问题有帮助吗？如果是这样，您可以参考this，它可以帮助其他社区成员将来解决类似的问题。感谢您的理解。 【参考方案1】：

正如整篇博文所述，删除缓存控制和编译指示标头肯定会解决问题。但是我有一些要求来保留这些标题。虽然我没有直接解决这个问题，但我就是这样解决的 -

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

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

【讨论】：

【参考方案2】：

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

我找到了a blog，它详细解释了这个问题。我觉得作者在博客里说的理由很有道理：