自定义字体未在IE中显示

时间：2015-02-14 16:31:28

标签： css internet-explorer cross-browser font-face

此处：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">&asymp;</div>
    <div id="play">&Delta;</div>
    <div id="next">&rang;</div>
    <div id="prev">&lang;</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">&copy; 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>

2 个答案:

答案 0 :(得分：0)

你应该将此方法用于IE的路径.EOT字体：

 src: url('../font/Yekan.eot?#iefix') format('embedded-opentype')

答案 1 :(得分：0)

检查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]仅在设置为“可安装”时才有效。

相关问题
最新问题