图标字体未在IE11中加载

7 回答

• 2

  这是问题所在：https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

  基本上微软让我们不得不回到使用精灵表 .

  回复于 2024-05-02T13:59:59+08:00
• 23

  遇到类似的问题，从上面的截图中，响应的Cache-Control Headers 为“no-store” . IE似乎在缓存和字体方面存在问题 .

  同时删除'Cache-Control：no-store'和“Pragma：no-cache” Headers 可以让我们再次显示图标字体 .

  https://github.com/FortAwesome/Font-Awesome/issues/6454

  回复于 2024-05-02T13:59:59+08:00
• 2

  在调查了同样的问题，并通过在线发布的各种解决方案后，我创建了以下故障排除列表，其中涵盖了大多数潜在原因：

  • 在Internet选项/安全/自定义级别/字体下载启用/禁用下，IE中禁用字体下载 . 它们可能会被您的网络管理员禁用，在这种情况下，您将无法查看或更改此设置 .

  • 您的HTTP标头阻止IE在本地存储字体文件 . 要修复此问题，请删除所有 Cache-Control: no-store, no-cache 或 Pragma: no-cache 标头或任何带有过去日期的 Expires 标头 . 此外 Vary 标头在IE中有其技巧，如果设置为 Accept-Encoding ， User-Agent ， Host 或 Accept-Language 以外的任何其他内容，则IE将不会缓存任何内容， unless 也会出现 ETAG 标头（请参阅this MSDN blog post） .

  • 您没有为字体下载设置正确的MIME类型 . 例如，对于通常的字体类型（ eot, woff, woff2 ），Jetty 9将默认设置 Content-Type: text/plain . 有关要使用的正确内容类型，请参阅this answer .

  • 确保使用 display: block 或 display: inline-block 作为图标元素 .

  • 最后，确保在FontAwesome上查看troubleshooting guide .

  回复于 2024-05-02T13:59:59+08:00
• 0

  我有一个类似的问题，它似乎是由IE与某些 display 和 position 设置与iconfonts结合有困难引起的 .

  它通常应该使用：

  element:before {
       display:block;
       position: absolute;
       ... your styles ...
  }
  

  回复于 2024-05-02T13:59:59+08:00
• 1

  我遇到了类似的问题，但使用Bootstrap字体图标（Glyphicons） . 你可以试试这是否有效：

  （通常在Windows 10上）IE-11设置已更改为不下载任何外部字体并仅使用Windows中可用的字体 . 这是默认行为 .

  但是我们可以在IE中更改此设置以使其能够下载外部字体 . 以下是IE中要采取的步骤 - 转到：设置>> Internet选项>>安全
  

  单击“Internet”（或您可能正在使用的任何区域）>>“自定义级别...”
  “安全设置”中的下一步 - 启用“字体下载” . 默认情况下，它将被禁用 .
  

  刷新页面

  回复于 2024-05-02T13:59:59+08:00
• 0

  语法是正确的，但是您使用的转换器从.tff转换为.eof的方式可能存在问题 . 有关此问题的更多详细信息，请参阅此文章http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

  与此同时，您可以尝试使用Google字体托管的字体来测试问题 . 我这样说是因为谷歌无缝地处理跨浏览器兼容性 . 如果事实证明Google字体有效，那么您就知道它的字体转换方式存在问题，您需要尝试另一种字体 . 根据我的理解Font Squirrel非常擅长生成跨浏览器兼容的字体 . 我希望这有助于好运

  回复于 2024-05-02T13:59:59+08:00
• 3

  在我的情况下，它已损坏.eot字体文件 . 我已经生成了新的（新的.css样式）并修复了问题 . 试试吧 .

  PS . 确保在@ font-face支持IE的EOT，例如：

  @font-face {
    font-family: "fontName";
    src:url("../../src/theme/fonts/fontName.eot");
    src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
    url("../../src/theme/fonts/fontName.woff") format("woff"),
    url("../../src/theme/fonts/fontName.ttf") format("truetype"),
    url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  

  回复于 2024-05-02T13:59:59+08:00