自定义字体在 IE 中不显示
Posted
技术标签:
【中文标题】自定义字体在 IE 中不显示【英文标题】：Custom Font is not displaying in IE 【发布时间】：2015-04-15 13:28:24 【问题描述】：这里：http://thunderstorm999.byethost9.com/
注意页脚文本。它在 IE 中与在 Chrome 和 Firefox 浏览器中不同。我的字体在 IE 中显示不正常。同样由于这个原因，IE中的对齐方式与Firefox和Chrome中的对齐方式不同。IE和其他浏览器中的布局也有所不同。请告诉我我哪里出错了。我面临的问题是什么对于 IE。请点击上面的链接。
@font-face
font-family: 'footerFont';
src: url('UniversLTStd-LightCn.eot'),url('UniversLTStd-LightCn.otf'),url('UniversLTStd-LightCn.ttf');
header
width:1366px;
.logo
padding-left:80px;
margin-left:36px;
margin-bottom:10px;
margin-top:36px;
.share
list-style:none;
float:right;
margin-right:60px;
margin-left:36px;
margin-top: -36px;
.share li
display:inline;
padding-right:20px;
aside
margin-left:-10px;
border-right: 1px dotted red;
height:622px;
width:128px;
margin-top:-7px;
aside li
width:60px;
margin-left:1px;
.navigation
list-style:none;
padding-top:10px;
.navigation li
text-align:center;
margin-bottom:20px;
.social_icons
list-style:none;
padding-top:10px;
margin-top: 88px;
.social_icons li
text-align:center;
margin-bottom:10px;
.main-image .image1
position: absolute;
border-top-style: solid;
border-top-width: 0px;
margin-left: 119px;
top: 78px;
footer
width: 1365px;
font-size:11.333333px;
padding:0;
height: 30px;
border-top: 1px dotted red;
font-family:"footerFont",Times New Roman, Georgia, Serif;
position:relative;
.left_footer
list-style:none;
margin-left:-42px;
margin-bottom:0px;
margin-top:-20px;
.left_footer p
display:inline;
float:left;
.footer_p1
margin-left: 108px;
padding-right:15px;
margin-top:18px;
.footer_p2
margin-top:18px;
margin-left: 2px;
.right_footer
list-style:none;
margin-bottom:0px;
margin-top:-20px;
margin-right:-42px;
.right_footer p
display:inline;
float:right;
position:absolute;
.footer_p3
right:16px;
margin-top:18px;
.footer_p4
right:164px;
margin-top:18px;
.clearfix:after
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.clearfix
display: inline-block;
html[xmlns] .clearfix
display: block;
* html .clearfix
height: 1%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function()
$('#play').click(function() $('#slider').cycle('resume'); return false; );
$('#pause').click(function() $('#slider').cycle('pause'); return false; );
$('#slider').cycle(
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
pager: '#pager',
timeout: 3000,
speed: 900
);
);
</script>
<style type="text/css">
#hero
width: 1245px;
height: 622px;
display: block;
position: absolute;
top: 78px;
left: 127px;
#slider
width: 1245px;
height: 622px;
display: block;
position: absolute;
overflow: hidden;
.info
width: 960px;
height: 80px;
display: block;
position: relative;
bottom: 100px;
background: rgba(102,204,204,.2);
z-index: 99;
.info h2
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
padding: 15px 0 0 20px;
.info p
font-family: sans-serif;
font-size: 15px;
font-weight: ligher;
color: #FFF;
padding: 0 0 0 20px;
line-height: 1px;
#play
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 44px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
#pause
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 88px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
#next
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 0;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
#prev
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 0;
right: 133px;
background: rgba(102,204,0,.2);
color: #FFF;
cursor: pointer;
z-index: 999;
#pager
width: 100%;
text-align: center;
display: block;
position: absolute;
cursor: pointer;
z-index: 999;
#pager a
font-size: .0em;
color: transparent;
width: 10px;
height: 10px;
display: inline-block;
position: relative;
border: 1px solid #FFF;
border-radius: 20px;
background: transparent;
margin: 10px;
#pager a.activeSlide background: #FFF;
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><a href="#"><img id="image1" src="images\explore.png"/></a></li>
<li><a href="#"><img src="images\material.png"/></a></li>
<li><a href="#"><img src="images\team.png"/></a></li>
<li><a href="#"><img src="images\contact.png"/></a></li>
<li><a href="#"><img src="images\merchandise.png"/></a></li>
</ul>
<ul class="social_icons">
<li><a href="#"><img id="image1" src="images\fb.png"/></a></li>
<li><a href="#"><img src="images\vimeo.png"/></a></li>
<li><a href="#"><img src="images\linkedin.png"/></a></li>
</ul>
</aside>
<div id="hero">
<div id="pager"></div>
<div id="pause">≈</div>
<div id="play">Δ</div>
<div id="next">⟩</div>
<div id="prev">⟨</div>
<div id="slider">
<div class="items">
<img src="01-secret-gathering.jpg">
<div class="info">
<h2>The Secret Gathering</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="02-sky-race.jpg">
<div class="info">
<h2>The Sky Race Begins</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="03-sky-wall.jpg">
<div class="info">
<h2>The Sky Wall Rising</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="04-sun-ring.jpg">
<div class="info">
<h2>The Sun has Rings</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
<div class="items">
<img src="05-moon-duality.jpg">
<div class="info">
<h2>The Moon Duality</h2>
<p>This is the moment, captured in time. <a href="http://www.bokharia.com">Learn More</a></p>
</div><!--End--info-->
</div><!--End--Items-->
</div><!--End--Slider-->
</div>
</div>
<footer>
<ul class="left_footer">
<li><p class="footer_p1">© COPYRIGHT 2015 SPECK</p></li>
<li><p class="footer_p2">TERMS & CONDITIONS</p></li>
</ul>
<ul class="right_footer">
<li><p class="footer_p3">DEVELOPED BY IDEATE FUSION</p></li>
<li><p class="footer_p4">DESIGNED BY SPECK</p></li>
</ul>
</footer>
</body>
</html>【问题讨论】：
【参考方案1】：你应该使用这个方法为 IE 的路径 .EOT 字体：
src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')
【讨论】：
尝试使用上面的代码.. 问题仍然存在。更新链接：thunderstorm999.byethost9.com 对 ttf 使用 truetype，如下所示：url('../font/Yekan.ttf') format('truetype') 并检查字体路径 用上面的代码也试过了.. 还是不行.. :(【参考方案2】：检查 IE 控制台（按 F12 后）。在你的页面上我得到了：
CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.
UniversLTStd-LightCn.otf
这可能需要编辑otf 字体。见for example。
也可以在w3schools on fontface:
1 提示：字体 URL 使用小写字母。大写字母在 IE 中会产生意想不到的结果！
2 IE：字体格式 [TTF/OTF] 仅在设置为“可安装”时有效。
【讨论】：
以上是关于自定义字体在 IE 中不显示的主要内容，如果未能解决你的问题，请参考以下文章