字体真棒字体在IE8上显示为框

时间:2012-08-26 13:00:19

标签: css internet-explorer webfonts font-awesome

所以我在项目中使用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]-->

我有四个字体文件......

  • 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(上面的代码已经更新)。即使在刷新和删除缓存刷新之后,仍然没有运气。

10 个答案:

答案 0 :(得分:14)

我遇到了同样的问题并找到了解决方案,我会在这里发布,万一有人还需要它。

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

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

?#iefix添加到包含font-face的CSS中的eot网址(在本例中为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 */
}

答案 1 :(得分:11)

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

e.g。而不是:

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

使用:

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

可以在Font Awesome Cheatsheet上找到字符代码。无论IE版本是什么,这似乎都在起作用。

希望这有助于某人,

杰森

答案 2 :(得分:6)

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

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

答案 3 :(得分:4)

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

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

答案 4 :(得分: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" />

答案 5 :(得分:1)

将响应标头中的缓存控制设置为私有字体文件,对我来说在IE8中完美运行。关于这方面的更多解释可以在这里找到 - 他解释了他如何解决PDF文件(Can't display PDF from HTTPS in IE 8 (on 64-bit Vista))。

希望这有帮助。

答案 6 :(得分: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>

答案 7 :(得分:1)

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

答案 8 :(得分:1)

唯一对我有用的是:

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

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

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

使用:

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

答案 9 :(得分:-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">

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

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