IE 11有时会阻止显示"font-awesome"网页字体。

Question

我们的一些IE11客户端无法在我们的Web应用程序中看到“font-awesome” web字体。我已经对我们自己的IE11实例进行了广泛测试，也通过跨浏览器测试工具进行了测试。所有测试都正确执行。因此，我很难理解为什么某些IE11设置可能无法看到“Font-Awesome” web字体？我尝试更改安全设置以复制问题，但没有成功。 因此，我正在寻求关于可能导致此问题的建议？我能想到的唯一其他事情是如果IE是通过共享服务器（如Citrix）提供的。 提前感谢。 编辑1 更多证据：

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，则问题会出现...

- SamJolly

---

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

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

@SamJolly 试着将该网站添加到“受信任”的区域，而不是“受限制”的区域。 - MemeDeveloper

@SamJolly 另外，您尝试在不工作的设置上使用 Fiddler 了吗？ - MemeDeveloper

Answer 1

IE安全设置

我注意到在Internet Explorer中，“受限网站”（Restricted Sites）中的站点无法显示字体图标 (font awesome)，而“受信任的站点”则可以。

因此，我猜测问题出在不同用户的IE安全设置上。

您可以要求用户检查/更改其IE选项，例如（以下是IE 11的说明，但其他版本也会非常相似）：

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

注：如果您没有使用https，您还需要选择以下选项

• "为该区域的所有站点要求服务器验证(https:)" - 取消选择

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

使用Fiddler调试

如果您可以访问任何用户的计算机，可以远程登录，或者有任何高级用户可以指导，则可以尝试使用优秀的Fiddler http代理调试，以查看在http请求/响应级别上发生了什么。

您还可以更改自己的IE安全设置，以查看是否可以复制出现的问题。

- Charles Fettinger

---

什么是不受信任的网站？好的，目前我们没有使用SSL，这会有帮助吗？我们还发现不同的访问点可以工作，比如在家里可以，但在办公室不行。办公室没有特殊设定，只是一个由ISP提供的标准设置的路由器。唯一变化的是路由器。我们在Edge上也遇到了问题，但Chrome和Firefox没有。通过远程桌面连接，在Azure Windows 10虚拟机上使用Edge和IE完美运行。 - SamJolly

如果你确定问题确实是IE安全设置的问题，那么使用SSL很可能会有帮助。无论如何，对于生产环境的网站来说这是一个不错的主意，但也取决于预算 - 证书的成本大约在100-200美元之间，在现代的IIS上只需要几分钟就可以设置好。总之，SSL不会有任何坏处。 - MemeDeveloper

如果您在家庭网络/计算机上没有问题，但在办公室/域网络中遇到问题，则IE安全设置很可能是一个很有可能的候选者。请注意，如果您在Azure VM中托管，并且未更改这些IE安全设置，则它们应该设置为非常高的安全性/限制性设置（假设您指的是Windows Server而不是Windows 10？），因此将为您提供另一个测试和查看是否可以复制问题的地方。 - MemeDeveloper

@MemeDeveloper，感谢你。Azure虚拟机是Windows 10系统，我同意默认情况下应该对其进行严格的安全设置。然而，我的使用过程中没有遇到任何问题。 - SamJolly

@SamJolly 这是一个默认具有非常严格IE安全设置的Windows服务器，而不是Windows 10。谢谢。 - MemeDeveloper

Answer 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://dev59.com/Dl8d5IYBdhLWcg3wYhWX#33508291

- zendu

---

这对我有帮助，谢谢！由于我们公司的笔记本电脑无法更改IE设置，所以我不能进行更改。作为一种调整，我没有覆盖标头，而是使用自定义过滤器和响应包装器将它们“未设置”。有关详细信息，请参见此处：https://dev59.com/-Gsz5IYBdhLWcg3wcXXF#7895292 - Recek

Answer 3

如果由于DISA STIG安全原因无法启用可下载字体，请尝试此解决方案，该方案将向您展示如何将字体转换为Base 64格式，并将其用作CSS文件以推送字体。。请保留HTML标签。

- TadLewis

---

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

Answer 4

• Cog（齿轮图标）
• Internet选项
• 安全
• 自定义级别
• 下载 -> 字体下载 -> 启用。

- dwjohnston

---

完美！谢谢！ :) - Rami A.

Answer 5

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

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

- Wilder Pereira