Font Awesome 字体在 IE8 上显示为框 [英] Font Awesome fonts show up as boxes on IE8
问题描述
所以我在一个项目和测试中使用 .除了字体文件的路径外，这或多或少是我从他们那里下载的.
基于@Abody97 我添加了 https://html5shim.googlecode.com/svn/trunk/html5.js 混合(上面的代码已更新).仍然没有运气，即使在刷新和删除缓存刷新之后也是如此.
我遇到了同样的问题并找到了解决方案，我会在这里发布，以防有人仍然需要它.
问题是 IE 无法加载字体文件，它正在构建返回 404 错误的奇怪 GET 请求.
使用此处找到的技巧:http://www.fontspring.com/blog/fixing-ie9-font-face-problems 我能够解决这个问题.
将 ?#iefix 添加到包含字体的 CSS 中的 eot url(在本例中为 font-awesome.css)
@font-face {字体系列:'MyWebFont';src: url('webfont.eot');/* IE9 兼容模式 */src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('webfont.woff') format('woff'),/* 现代浏览器 */url('webfont.ttf') 格式('truetype'),/* Safari, Android, iOS */url('webfont.svg#svgFontName') 格式('svg');/* 旧版 iOS */}So I am using Font Awesome in a project and in testing I'm running into issues with IE8.
On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.
My code is:
<!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]-->
I have the four font files...
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
...where they belong and they are readable by the world (755 permissions). What am I missing? Do I have to do something with compatibility view in IE8?
The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.
As requested, a copy of font-awesome.css is here: font-awesome.css. It is more or less what I downloaded from them with the exception of the path to the font files.
Based on @Abody97 I added https://html5shim.googlecode.com/svn/trunk/html5.js into the mix (Code above has been updated). Still no luck, even after a refresh and a delete cache refresh.
I had the same problem and found a solution, I'll post it here in case anyone still needs it.
The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.
Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.
Add ?#iefix to the eot url in the CSS that contains the font-face (in this case 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 */
}
这篇关于Font Awesome 字体在 IE8 上显示为框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
