logo标签列表

Font Awesome字体在IE8上显示为方块

cssinternet-explorerwebfontsfont-awesome
22

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

在 Windows 上，IE9、Chrome 和 Firefox 能正确显示字体（在 OS X 上，Firefox、Chrome 和 Safari 也是如此），但在 Windows 上的 IE8 中，字体会被替换成一个方框。

enter image description here

我的代码是：

<!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]-->

我已经将这四个字体文件放在正确的位置，并设置了755权限，但它们仍然无法被访问。在IE8中，我是否需要进行兼容性设置？

同一台计算机可以正常查看Font Awesome网站上的字体，所以一定是我做错了什么。

按照@Abody97的建议，我添加了https://html5shim.googlecode.com/svn/trunk/html5.js（以上代码已更新）。但即使刷新并清除缓存后，仍然没有成功。

如请求所示，font-awesome.css 的副本在此处。它与我从 Font Awesome 下载的内容基本相同，除了字体文件的路径不同。

@Nico Burns - 我更新了帖子，包括一个链接到 .css 文件的副本。 - Jason
@Abody97 - 我不能确定我是否设置了那个。那是我在IE8中设置的吗？（我以前从未这样做过）我认为<meta charset="utf-8" />已经为我完成了这个工作... - Jason
@Abody97 - 是的，我的设置为“Unicode (UTF-8)” - 仍然有同样的问题。 - Jason
你是分别找到这四个文件的，还是通过类似www.fontsquirrel.com之类的工具生成的？也许.eot文件不完整，缺少你尝试使用的字符，而.woff文件则没有这个问题。 - Pevara
@PeterVR - 我从http://fortawesome.github.com/Font-Awesome/获取了四个字体文件。 - Jason
显示剩余4条评论
10个回答
14

我曾经遇到同样的问题并找到了解决方法，在这里发布一下以防还有人需要。

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

使用在此处发现的技巧：http://www.fontspring.com/blog/fixing-ie9-font-face-problems 我成功解决了这个问题。

在包含font-face的CSS中（在这种情况下是font-awesome.css），将?#iefix添加到EOT URL中。

@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 */
}
另一个问题是使用HTTP或HTTPS引用路径...如果删除http:或https:，@fa-font-path："//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts"可以正常工作。 - Nigel Sheridan-Smith
11
这似乎是一个常见的问题，而根据这个讨论，与使用:before附加该字符有关。实际上，我发现在IE 8中使其工作最简单的方法是不使用fa-name类，并手动插入该字符。
例如，不要使用以下内容：
<i class="fa fa-user fa-lg"></i>

用途：

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

字符代码可以在Font Awesome速查表上找到。无论使用哪个IE版本，这似乎都能正常工作。

希望有所帮助，

Jason

这是在ie8中为我工作的唯一方法。谢谢 - Adyyda
这在我的情况下没有帮助（IE9）。 - Dilip Kumar Yadav
谢谢，这个解决方案对我很有用。在大多数情况下它都能正常工作，只有在第一次加载页面时没有缓存时才会显示方框。 - Paul L
6
尝试在引入CSS之前，在你的 head 标签中添加以下内容：
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
1
很遗憾，我不能这么做 - 它不是公开的。我感觉自己缺少了一些非常基础的东西，因为当我在IE8中访问Font Awesome网站时，我得到了字体。 - Jason
@Jason 你确定你没有使用兼容性视图吗？ - Chris
对我有用。在 IE8 中删除了替换图标的方块。 - Kevin Zych
2
@Abody97 我建议删除 http: 部分，这样当从 https 页面加载时，此代码将不会产生安全警告。"<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>" - Kevin Zych
5
我建议大家下载一个发布版本的html5.js源代码，并将这个文件包含进来，而不是每次都从主干获取。https://code.google.com/p/html5shim/ - Kevin Zych
显示剩余6条评论
4

我曾经遇到过同样的问题，并通过将IE8的"安全级别"设置为低于"高"来解决它。

通常情况下，我可以通过使字体文件（eot、woff、ttf等）"不可用"（例如导致404响应）来复制"框" - 因此，我假设在"高"安全级别下它们只是没有加载......

3
事实证明，一个被包含文件生成的额外的<html>标签是我的问题源。因此，在我的最终文件中，我同时有了<html lang="en">和<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" />
4
那个额外的标签是什么？我遇到了类似的问题。 - Jonathan Ong
我也是。我遇到了同样的问题。 - João
7
提出问题，回答却不提供任何解决方案，最后将其标记为正确答案... 真是让人抓狂啊。 - tkorkunckaya
1
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>
1
在响应头中将字体文件的缓存控制设置为私有对我来说在IE8上完美解决了问题。这里可以找到更多解释-他解释了如何解决PDF文件的问题（无法在64位Vista上的IE 8（HTTPS）中显示PDF）。希望这能有所帮助。
这个解决方案让我在数月的故障排除后终于解决了问题。干杯！ - TheSoftwareJedi
1

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

-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----... 

                                 ----... 

                        ----...

然后在你的index.html中放置链接样式

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

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

现在测试一下，一切都准备就绪。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接