IE 11“有时”阻止显示“font-awesome”网络字体

Posted 2023-03-15

【中文标题】IE 11“有时”阻止显示“font-awesome”网络字体

【英文标题】：IE 11 "sometimes" preventing the display of "font-awesome" webfonts

【发布时间】：2015-10-23 01:57:54

【问题描述】：

我们的一些 IE11 客户端在我们的 Web 应用程序中看不到“font-awesome”网络字体。我已经使用我们自己的 IE11 实例以及跨浏览器测试工具进行了广泛的测试。全部正确执行。所以我很难理解为什么 IE11 的某些设置可能看不到“Font-Awesome”网络字体？我确实尝试更改安全设置以复制问题，但没有成功。

所以我正在就可能导致此问题的原因寻求一些建议？我唯一能想到的另一件事是，IE 是否通过 Citrix 等共享服务器提供服务。

提前致谢。

EDIT1

更多证据：

Desktop1   S/W Firewall(on/off)     Windows 7     IE V11.0.9600.17959    Office  Errors
Laptop1    No S/W Firewall          Windows 7     IE V11.0.9600.17959    Office  OK
Laptop1    No S/W Firewall          Windows 7     IE V11.0.9600.17959    Home    OK 
Azure VM   ?? S/W Firewall          Windows 10    IE V11 via Edge        Azure   OK
Azure VM   ?? S/W Firewall          Windows 10    Edge                   Azure   OK
Laptop2    ?? S/W Firewall          Windows 10    Edge                   Home    Errors

更多证据 2

当我第一次进入页面时，图标显示。当用户从超链接重新进入页面时，图标不会显示。然而，一个 ctrl-F5 对其进行排序。

更多证据 3

我还看到链接到可点击字体的 Ajax 链接请求被设为非活动状态。

更多证据 4

当我将我的网站添加到“受限”时，我什至无法登录，所以我不相信这是原因。

找到我的问题的原因。

我的问题是由 IE 浏览器历史记录设置引起并修复的

Cog
  - Internet Options
     - General
       - Browsing History
          - Settings
            - Temporary Internet Files
              - Automatic (will cause issue)
              - Every time I visit the webpage (will fix issue)

下面的答案仍然会导致问题，但在我的情况下不是原因

找到了我的问题的原因，但不适用于 HTTPS

刚刚发现如果我尝试通过 Cloudflare 实现 HTTPS，问题就代表了它本身......

【问题讨论】：

可能是代理。如果您只放置了 FontAwesome 网站的链接而不是应用程序中的文件，则代理可能会阻止外部访问。

这不会影响所有浏览器，而不仅仅是 IE？

@SamJolly 尝试将网站添加到“受信任”区域而不是“受限”区域。

@SamJolly 另外 - 您是否尝试过 fiddler 设置不起作用？

【参考方案1】：

IE 安全设​​置

我注意到“受限站点”中的站点（在 Internet Explorer 中）不显示超棒字体，而“受信任站点”区域中的站点可以。

所以我猜问题在于不同用户的不同 IE 安全设​​置。

你能要求用户检查/更改他们在 IE 中的选项吗？ （IE 11 的说明，但其他的会非常相似）：

设置齿轮（右上角的图标） Internet 选项（菜单选项） 安全（标签） 网站（按钮） 输入您网站的网址 点击添加（按钮）

注意如果您不使用 https，您可能还需要该选项

“要求此区域中所有站点的服务器验证 (https:)”- 被取消选择

请求用户进行这些更改，然后从那里进行故障排除。

要调试的提琴手

如果您可以访问任何用户的机器，可以远程访问，或者您可以指导任何高级用户，那么您也可以尝试在他们的机器上使用出色的 Fiddler http 代理进行调试，以查看在http 请求/响应级别。

您也可以更改自己的 IE 安全设​​置，看看是否可以复制问题

【讨论】：

什么是不受信任的站点？好的，我们目前不使用 SSL，这有帮助吗？我们还发现，不同的接入点可以在家里工作，而办公室则不能。办公室没有什么特别的代理，只有一个 ISP 提供的标准设置路由器。然而，唯一改变的是路由器。 Edge 也有问题，但 Chrome 或 Firefox 没有。通过 RDC 在 Azure Windows 10 VM 上的 Edge 和 IE 运行良好。

如果您确定问题确实与 IE 安全设​​置有关，那么是的，SSL 可能会有所帮助。无论如何，这对于生产站点来说都是一个好主意，这完全取决于预算——一个证书的成本约为 100 到 200 美元，而在现代 IIS 中需要几分钟的时间来设置。底线 SSL 不会受到伤害

如果您在家庭网络/机器上没有问题，但在办公室/域网络中确实有问题，那么 IE 安全设​​置很可能是候选者。注：如果您在 azure VM 中托管并且没有将这些 IE 安全设​​置从默认值更改，那么它们应该设置为非常高的安全性/限制性设置（假设您的意思是 Windows Server - 而不是 Windows 10？），因此会给您另一个地方测试，看看你是否可以复制问题。

@MemeDeveloper，谢谢。 Azure VM 是 Windows 10，我同意我希望默认情况下安全性会很严格。但是我没有遇到任何问题。

@SamJolly 它是一个 Windows Server，默认情况下会有非常严格的 IE 安全设​​置，而不是 Windows 10。谢谢。

【参考方案2】：

在我的情况下，我只能在使用 Win 10 + IE 11 时看到这个问题。即使在确保正确的 IE 设置（启用安全区域和字体下载）之后，字体也不会呈现。似乎不应该为字体设置缓存头。

我们正在使用 Spring MVC 和 Tomcat。在 CORS 过滤器中添加以下代码为我解决了问题。

        if (!request.getServletPath().endsWith(".woff")
                && !request.getServletPath().endsWith(".ttf")) 
            response.setHeader("Cache-Control", "no-cache");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", -1);
        

https://***.com/a/33508291/828062

【讨论】：

这为我修好了，谢谢！无法更改 IE 设置，因为在我们公司的笔记本上无法更改。作为一项调整，我没有覆盖标题，而是使用自定义过滤器和 ResponseWrapper“未设置”它们。详情见这里：***.com/questions/7895196/…

【参考方案3】：

齿轮 互联网选项 安全性 自定义级别 下载 -> 字体下载 -> 启用。

【讨论】：

完美！谢谢！ :)

【参考方案4】：

如果您出于 DISA STIG 安全原因无法启用可下载字体try this solution that shows you how to Base 64 a font 并将其用作 CSS 文件来推送字体。

【讨论】：

检查了该解决方案，但不起作用。我在那里发布的内容：这不起作用的原因与非 base64 网络字体不起作用的原因相同。在 base64 示例中，您仍然在 src:url 值中传递 mime 类型，这就是 IE 中的安全设置阻止 webfonts 的方式。

【参考方案5】：

从下载字体的端点的响应标头中删除 Pragma 标头为我解决了问题。

if (request.getServletPath().contains(".woff") || request.getServletPath().contains(".ttf")) 
    headers.remove(HttpHeaders.PRAGMA);