Font Awesome 字体在 IE8 上显示为框
Posted
技术标签:
【中文标题】Font Awesome 字体在 IE8 上显示为框【英文标题】：Font Awesome fonts show up as boxes on IE8 【发布时间】：2012-08-21 06:04:15 【问题描述】：所以我在一个项目中使用 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 添加到组合中（上面的代码已更新）。即使在刷新和删除缓存刷新之后仍然没有运气。
【问题讨论】：
可以看到font-awesome.css的内容吗？问题很可能在那里......另外，IE8 将使用eot 文件，而 ie9 可能使用woff。我的猜测是 css 文件的 eot 或类似文件的路径错误。
@Nico Burns - 我更新了帖子以包含指向 .css 文件副本的链接
您确定浏览器中的编码设置为 UTF-8 吗？
@Abody97 - 我不能肯定我有那一套。这是我在 IE8 中设置的吗？ （不能说我以前做过）我的印象是 为我做的......
@Jason 通常在Page 菜单-> Encoding。默认情况下它设置为 UTF-8，但要格外确定也无妨。
【参考方案1】：
我遇到了同样的问题并找到了解决方案，我会在这里发布以防有人仍然需要它。
问题是 IE 无法加载字体文件，它正在构建返回 404 错误的奇怪 GET 请求。
使用此处找到的技巧：http://www.fontspring.com/blog/fixing-ie9-font-face-problems 我能够解决此问题。
将?#iefix 添加到包含字体的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 */
【讨论】：
另一个问题是使用 HTTP: 或 HTTPS: ... @fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts" 引用路径如果您删除 http: 或 https: 则有效【参考方案2】：这似乎是一个非常普遍的问题，据此discussion 与使用 :before 附加的字符有关。实际上，我发现让它在 IE 8 中工作的最简单方法是不使用 fa-name 类并手动插入字符。
例如而不是：
<i class="fa fa-user fa-lg"></i>
使用：
<i class="fa fa-lg"></i>
字符代码可以在Font Awesome Cheatsheet 上找到。无论 IE 版本如何，这似乎一直有效。
希望这对某人有所帮助，
杰森
【讨论】：
这是在 ie8 中唯一对我有用的东西。谢谢 这对我的情况没有帮助（ie9）。 谢谢，这个解决方案适用于我大部分时间都有效的问题，仅在第一次加载没有缓存的页面时显示方框。【参考方案3】：尝试在添加 CSS 之前将其添加到您的 head：
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
【讨论】：
我刚试过（检查我上面的代码更改）没有运气。唯一的区别是我使用了html5shim.googlecode.com/svn/trunk/html5.js，因为我只需要它是 https 流量。 @Jason 您能否提供指向您网站的实时链接？这真的很奇怪。 不幸的是我不能 - 它不公开。自从我在 IE8 中访问 Font Awesome 网站时获得了字体，我觉得我错过了一些非常基本的东西。 @Abody97 我建议更改删除 http: 部分，以便此代码在从 https 页面加载时不会发出安全警告。 "" 更好的是，我建议大家下载一个发布版本的 html5.js 源并包含这个文件，而不是总是从主干中提取。 code.google.com/p/html5shim【参考方案4】：刚刚遇到同样的问题，通过将 IE8 的“安全级别”设置为低于“高”的值来解决它。
一般来说，我可以通过使字体文件（eot、woff、ttf...）“不可用”（例如导致 404 响应）来重现“框” - 所以我假设，在安全级别“高" 他们只是没有加载...
【讨论】：
【参考方案5】：事实证明，包含文件生成了一个额外的 <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" />
【讨论】：
那个额外的标签是什么？我也有类似的问题。 我也是。我也有同样的问题。 问一个问题，回答它而不给出任何解决方案，检查答案是否正确...arrrg。【参考方案6】：将响应标头中的缓存控件设置为字体文件的私有，对我来说在 IE8 中效果很好。可以在此处找到更多解释 - 他解释了他如何解决 PDF 文件 (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista))。
希望这会有所帮助。
【讨论】：
这在我进行了几个月的故障排除后解决了。干杯。【参考方案7】：在 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>
【讨论】：
【参考方案8】：IE 9 版本以下不支持woff 文件格式。可能这就是为什么您无法在 IE8 上获取它们的原因
【讨论】：
【参考方案9】：唯一对我有用的是：
https://github.com/FortAwesome/Font-Awesome/issues/2324
结合杰森的另一个回答： 例如而不是：
<i class="fa fa-user fa-lg"></i>
使用：
<i class="fa fa-lg"></i>
【讨论】：
【参考方案10】：不只是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"> 在头部之间
一个非常重要的注意事项是：不要尝试组合 fontawesome 文件夹和任何其他文件夹。将它们分开。
现在测试一下，一切顺利。
【讨论】：
以上是关于Font Awesome 字体在 IE8 上显示为框的主要内容，如果未能解决你的问题，请参考以下文章
IE 11“有时”阻止显示“font-awesome”网络字体
在web.config文件中，增加“type="APP.Modules.CommandModule,CommandModules"”节点会导致awesome font字体图标显示为