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中不起作用，它甚至根本不加载字体。我已经在Windows 7上使用IE9在IE7模式下以及在具有原生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

如果您添加以下信息： - 你使用的是什么版本的bootstrap - 你使用的是什么版本的字体？

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

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

我在ie7工作得很好，因为我们仍然需要在这里支持它。：（

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

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

2 个答案: