22

所以我在一个项目中使用Font Awesome，在测试中我遇到了 IE8 的问题。

在 Windows IE9 上，Chrome 和 Firefox 正确显示字体（OS X 上的 Firefox、Chrome 和 Safari 也是如此），但 Windows 上的 IE8 有一个问题，我得到一个框来代替字体。

在此处输入图像描述

我的代码是：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>
    <meta charset="utf-8" />
    <title>Site title</title>

    <!--[if lt IE 9]>
        <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href=".../css/css.css" rel="stylesheet" type="text/css">
    <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

    <link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed">
    <link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
    <link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
    <link href="../css/prettify.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
    <!--[if IE 7]>
        <link href="../css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->

我有四个字体文件...

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

...它们所属的地方，它们可以被世界读取（755 权限）。我错过了什么？我必须对 IE8 中的兼容性视图做些什么吗？

同一台计算机可以很好地查看 Font Awesome 网站上的字体，所以一定是我做错了。

根据要求，font-awesome.css 的副本在这里：font-awesome.css。除了字体文件的路径之外，它或多或少是我从他们那里下载的。

基于@Abody97，我将https://html5shim.googlecode.com/svn/trunk/html5.js添加到组合中（上面的代码已更新）。即使在刷新和删除缓存刷新之后仍然没有运气。

4

10 回答 10

14

我遇到了同样的问题并找到了解决方案，我会在这里发布以防有人仍然需要它。

问题是 IE 无法加载字体文件，它正在构建返回 404 错误的奇怪 GET 请求。

使用这里找到的技巧：http ://www.fontspring.com/blog/fixing-ie9-font-face-problems我能够解决这个问题。

添加?#iefix到包含 font-face 的 CSS 中的 eot url（在这种情况下font-awesome.css）

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
于 2013-04-25T14:53:45.037 回答
11

这似乎是一个非常普遍的问题，根据这个讨论，与使用 :before 附加的字符有关。实际上，我发现让它在 IE 8 中工作的最简单方法是不使用 fa- name类并手动插入字符。

例如，而不是：

<i class="fa fa-user fa-lg"></i>

利用：

<i class="fa fa-lg">&#xf007;</i>

字符代码可以在Font Awesome Cheatsheet上找到。无论什么 IE 版本，这似乎一直有效。

希望这可以帮助某人，

杰森

于 2014-08-08T21:29:50.683 回答
6

head尝试在包含 CSS 之前将其添加到您的：

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2012-08-26T13:42:23.827 回答
4

just had the same problem and solved it by setting the IE8 "security level" to something below "High".

In general, I could reproduce the "boxes" by making the font files (eot, woff, ttf...) "not available" (e.g. resulting in a 404 response) - so I assume, on securiy level "High" they're just not loaded...

于 2013-02-20T10:50:55.180 回答
3

事实证明，<html>包含文件生成了一个额外的标签，这是我的问题的根源。所以，在我的最终文件中，我有两个<html lang="en">AND<html>额外的<html>标签将 IE 扔进怪癖模式，这导致了我遇到的字体真棒图标问题。

消除该流氓<html>并验证我的标题设置正确为我修复了所有问题。

我现在在所有页面上使用一组样板的标题标签：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

在我有一页上之前：

<!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />
于 2012-10-18T11:50:59.890 回答
1

将响应标头中的缓存控件设置为字体文件的私有，在 IE8 中对我来说效果很好。可以在这里找到更多解释 - 他解释了他如何解决 PDF 文件（Can't display PDF from HTTPS in IE 8 (on 64-bit Vista)）。

希望这可以帮助。

于 2014-01-22T23:27:20.410 回答
1

IE 9 版本以下不支持woff文件格式。可能这就是为什么您无法在 IE8 上获取它们的答案

于 2014-07-30T08:04:59.453 回答
1

在 IIS（MVC 环境）下，我必须将以下规则添加到我的 Web.config：

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
于 2014-01-24T21:51:11.660 回答
1

唯一对我有用的是：

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

结合杰森的另一个答案：例如，而不是：

<i class="fa fa-user fa-lg"></i>

利用：

<i class="fa fa-lg">&#xf007;</i>
于 2015-05-15T15:00:36.687 回答
-3

不只是IE，所有浏览器都有同样的问题。

有趣的是，您需要将文件放在正确的位置。

这意味着您需要以下结构：

folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

然后将链接 sylte 放在 index.html 中

<link rel="stylesheet" href="./font-awesome.min.css">在头之间

一个非常重要的注意事项是：不要尝试组合 fontawesome 文件夹和任何其他文件夹。将它们分开。

现在测试它，一切都很好。

于 2014-12-05T00:09:18.737 回答