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

所以我在一个项目中使用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。 除了字体文件的路径之外,它或多或少是我从它们那里下载的。

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


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

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

    使用这里找到的技巧: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 */
    }
    

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

    例如,而不是:

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

    使用:

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

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

    希望这可以帮助某人,

    贾森


    尝试添加给你的head ,包括CSS之前:

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    链接地址: http://www.djcxy.com/p/93469.html

    上一篇: Font Awesome fonts show up as boxes on IE8

    下一篇: Images in local html file not showing up in IE