字体真棒字体在IE8上显示为框
Jas*_*son 22 css internet-explorer webfonts font-awesome
所以我在一个项目中使用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(上面的代码已经更新).即使刷新和删除缓存刷新后仍然没有运气.
小智 14
我有同样的问题,并找到了解决方案,我会在这里发布,以防任何人仍然需要它.
问题是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 */
}
Jas*_*son 11
这似乎是一个非常普遍的问题,根据这个讨论与使用的附加角色有关:之前.我居然发现得到它在IE 8的工作是不使用的FA-最简单的方法名称类和手动插入字符.
例如,而不是:
<i class="fa fa-user fa-lg"></i>
使用:
<i class="fa fa-lg"></i>
字符代码可以在Font Awesome Cheatsheet上找到.这似乎一直有效,无论IE版本是什么.
希望这有助于某人,
贾森
尝试将此添加到您head之前包括CSS:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
- 更好的是,我建议大家下载html5.js源代码的发布版本,并包含此文件,而不是始终从主干中提取.https://code.google.com/p/html5shim/ (5认同)
- @ Abody97我建议更改删除http:part,以便当从https页面加载此代码时,此代码不会提供安全警告."<script src ="// html5shim.googlecode.com/svn/trunk/html5.js"> </ script>" (2认同)