Font Awesome 字体在 IE8 上显示为框答案

【问题标题】：Font Awesome fonts show up as boxes on IE8Font Awesome 字体在 IE8 上显示为框
【发布时间】：2012-08-21 06:04:15
【问题描述】：

所以我在一个项目中使用 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 添加到组合中（上面的代码已更新）。即使在刷新和删除缓存刷新之后仍然没有运气。

【问题讨论】：

可以看到font-awesome.css的内容吗？问题很可能在那里......另外，IE8 将使用eot 文件，而 ie9 可能使用woff。我的猜测是 css 文件的 eot 或类似文件的路径错误。
@Nico Burns - 我更新了帖子以包含指向 .css 文件副本的链接
您确定浏览器中的编码设置为 UTF-8 吗？
@Abody97 - 我不能肯定我有那一套。这是我在 IE8 中设置的吗？（不能说我以前做过）我的印象是为我做的......
@Jason 通常在Page 菜单-> Encoding。默认情况下它设置为 UTF-8，但要格外确定也无妨。

标签： css internet-explorer webfonts font-awesome

【解决方案1】：

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

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

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

将?#iefix 添加到包含字体的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 */
}

【讨论】：

另一个问题是使用 HTTP: 或 HTTPS: ... @fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts" 引用路径如果您删除 http: 或 https: 则有效

【解决方案2】：

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

例如而不是：

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

使用：

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

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

希望这对某人有所帮助，

杰森

【讨论】：

这是在 ie8 中唯一对我有用的东西。谢谢
这对我的情况没有帮助（ie9）。
谢谢，这个解决方案适用于我大部分时间都有效的问题，仅在第一次加载没有缓存的页面时显示方框。

【解决方案3】：

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

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

【讨论】：

我刚试过（检查我上面的代码更改）没有运气。唯一的区别是我使用了html5shim.googlecode.com/svn/trunk/html5.js，因为我只需要它是 https 流量。
@Jason 您能否提供指向您网站的实时链接？这真的很奇怪。
不幸的是我不能 - 它不公开。自从我在 IE8 中访问 Font Awesome 网站时获得了字体，我觉得我错过了一些非常基本的东西。
@Abody97 我建议更改删除 http: 部分，以便此代码在从 https 页面加载时不会发出安全警告。 ""
更好的是，我建议大家下载一个发布版本的 html5.js 源并包含这个文件，而不是总是从主干中提取。 code.google.com/p/html5shim

【解决方案4】：

刚刚遇到同样的问题，通过将 IE8 的“安全级别”设置为低于“高”的值来解决它。

一般来说，我可以通过使字体文件（eot、woff、ttf...）“不可用”（例如导致 404 响应）来重现“框” - 所以我假设，在安全级别“高" 他们只是没有加载...

【讨论】：

【解决方案5】：

事实证明，包含文件生成了一个额外的 <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" />

【讨论】：

那个额外的标签是什么？我也有类似的问题。
我也是。我也有同样的问题。
问一个问题，回答它而不给出任何解决方案，检查答案是否正确...arrrg。

【解决方案6】：

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

希望这会有所帮助。

【讨论】：

这在我进行了几个月的故障排除后解决了。干杯。

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

唯一对我有用的是：

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

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

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

使用：

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

【讨论】：

【解决方案10】：

不只是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 文件夹和任何其他文件夹。将它们分开。

现在测试一下，一切顺利。

【讨论】：