css – 字体Awesome字体显示为IE8上的框

前端之家收集整理的这篇文章主要介绍了css – 字体Awesome字体显示为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中是否需要兼容性视图?

相同的计算机查看字体Awesome网站上的字体很好,所以它必须是我做错了。

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

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

解决方法

我有同样的问题,找到一个解决方案,我会发布在这里,以防任何人仍然需要它。

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

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

在包含font-face(在这种情况下是font-awesome.css)的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 */
}

猜你在找的CSS相关文章