问题
Here : http://thunderstorm999.byethost9.com/
Oberserve the footer text.It is not the same in IE as in the Chrome and Firefox browser.My font is not displaying as it should in IE. Also due to this the alignment in IE is not the same as it is in Firefox and Chrome.Also the layout appears a bit different in IE and in other browser.Please tell me where am I going wrong.What is the issue I am facing for IE.Please follow the link above.
@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:
you should use this method for path .EOT font for IE :
src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')
回答2:
Check the IE console (after pressing F12). On your page I got:
CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.
UniversLTStd-LightCn.otf
This might required editing the otf font. See for example.
Also at w3schools on fontface:
1 Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!
2 IE: The font format [TTF/OTF] only works when set to be "installable".
来源：https://stackoverflow.com/questions/28517666/custom-font-is-not-displaying-in-ie