3

我搜索了类似的问题，但仍未找到解决我的@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 中工作。有任何想法吗？

4

2 回答 2

3

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

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

有关详细信息，请参阅问题 #38 。

于 2012-07-17T15:56:50.590 回答
0

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

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

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

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

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

于 2012-07-16T22:34:57.737 回答