@font-face 无法在 IE7 中加载字体

Question

我搜索了类似的问题，但仍未找到解决我的@font-face 规则为何在 IE7 中不起作用的解决方案。这是我的演示的实时链接：

http://www.staging.jungledragon.com/experiments/v3_02/

当您在现代浏览器中打开此站点时，您会注意到全局导航具有用于补充导航标签的图标。这些图标来自一种名为“FontAwesome”的字体。

根据许多地方推荐的最佳实践，我声明我的@font-face 规则如下：

@font-face {
    font-family: 'FontAwesome';
    src: url('../type/fontawesome-webfont.eot');
    src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
        url('../type/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'),
        url('../type/fontawesome-webfont.woff') format('woff'),
        url('../type/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

如前所述，它在 IE7 中不起作用，甚至似乎根本不加载字体。我已经在 IE7 模式下使用 IE9 在 Windows 7 上进行了测试，并且在使用本机 IE7 的 XP 机器上进行了测试。我也尝试过使用字体文件的绝对路径，但没有区别。

由于我在整个设计过程中都使用这些字体图标，我希望它能够在 IE7 中使用。有什么想法吗？

Answer 1

尝试向您的页面添加条件链接，链接到 Font Awesome 提供的单独的 font-awesome-ie7.css。

<!--[if IE 7]>
  <link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]-->

更多详情请见Issue #38。

Answer 2

如果您添加以下信息： - 您使用的是什么版本的引导程序 - 你用的是什么版本的 font-awesome？

FontAwesome 最近才添加了对 IE7 的支持，但它需要 bootstrap 2.0.3 或更高版本。 除此之外，当您编译它时，您必须确保并专门添加 .less 文件（或 css）。

他们的安装说明页面没有提到，但是如果你想支持ie7，你需要在font-awesome之外添加font-awesome-ie7.less文件进行编译。少于他们的说明页面指定的。

我在 ie7 中运行得很好，因为我们仍然需要在这里支持它。 :(

根据不使用引导程序进行编辑： - 如果您使用 LESS，则需要编译上述两个 LESS 文件。 - 如果使用 CSS，那么您需要复制两个 CSS 文件。 font-awesome-ie7.css 和 font-awesome.css 进入你的项目目录。 （以及您已经拥有并在此处描述的所有其他内容：http://fortawesome.github.com/Font-Awesome/#integration 在“不使用引导程序”标题下。