html - Internet Explorer 9 上的零星字体图标

Question

我有一个网站在两个不同的页面上使用 Glyphicons 和 Font-Awesome 字体图标，具有相同的行为:图标在 IE9 中不显示，但在 Chrome/Firefox 中运行完美。

做的事情:

• 从外部 CDN 加载图标

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"  rel="stylesheet">
  

  从外部 CDN 加载 font-awesome css/fonts 会使图标可靠地工作。不幸的是，该网站用于内部网，无法访问互联网。 这是不行的。

  • 通过重定向加载页面

  出于某种原因，每当我重定向到其中一个页面时，IE9 会中止 GET 一些 css 文件，只是在之后重新加载它们。

  在这种情况下，图标会按预期显示。所以我猜异常请求是相关的。但是以正常方式加载页面会导致图标消失，并且 css 会正常加载。 如果有人能向我解释一下，那就太好了。

不起作用的事情:

• 配置服务器以正确设置字体文件的Content-Type。我已经匹配了 CDN 上使用的 mime 类型，所以即使我有错误的值，也不会解决问题
• 关闭 compatibility view在 IE 中
• 减少 IE security settings
• 将 html5shiv/respond.js 添加到页面 ( html5shiv )
• 将 font-awesome CSS 文件移动到页面的其他位置。

• 在页面上手动加载glyphicon eot 字体文件，如下所示:

  <link rel="stylesheet" type="application/vnd.ms-fontobject" href="/some/absolute_path/fonts/glyphicons-halflings-regular.eot"/>
  

我看过的东西:

这些可能有帮助也可能没有帮助，但似乎代表了事物的状态。

• > compatibility view
• > security settings
• > html5shiv
• 错误的重定向问题:
  • > Unsolved SO question
  • > Unsolved MSDN question

Answer 1

这似乎是 github 上为 Font Awesome 报告的错误。查看thorst's solution对于大多数人来说，它似乎可以解决这个问题。

对于链接恐惧症:

I had to change font-awesome.css

From:

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); 

To:

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');