出于某种原因,我的@ font-face设置无法正常工作。
我正在研究他的located here网站。
奇怪的是,我使用fontsquirrel就像以前一样,但这一次,它似乎没有正常工作。
这是我的HTML索引页面,其中包含指向外部样式表的链接:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TileTabs</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
<link rel="stylesheet" href="css/SegoeWPRegular.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<script src="js/tile_interaction.js"></script>
</head>
<body>
<div id="header">
<img src="images/logo/logo_v3.png" alt="logo" />
</div>
<div id="content">
<ul>
<li>
<div id ="google" class="tile">
<img src="images/tiles/google/google.png" class="tile_image" width="27" height="41" />
<p>Google</p>
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
<li>
<div class="tile">
</div>
</li>
</ul>
</div>
<div id="footer">
<a class="emailus" href="index.htm">Home</a> | <a class="emailus" href="about.htm">About</a> | <a class="emailus" href="contact.htm">Contact</a>
</div>
</body>
</html>
这是我的SegoeWPRegular.css文件(fontsquirrel生成的样式):
@font-face {
font-family: 'SegoeWPRegular';
src: url('segoewp-webfont.eot');
src: local('☺'), url('segoewp-webfont.woff') format('woff'), url('segoewp-webfont.ttf') format('truetype'), url('segoewp-webfont.svg#webfontBtwagPKd') format('svg');
font-weight: normal;
font-style: normal;
}
最后,这是我的通用样式表,style.css:
body {
background: #F6F6F6;
font-family: 'SegoeWPRegular';
/*, 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;*/
margin: 0;
}
a:link, a:visited, a:hover, a:active {
color: white;
text-decoration: none;
}
h1, ul {
margin: 0;
}
#header {
width: 920px;
background: #999;
margin: 0px auto;
text-align: center;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
#content {
width: 920px;
height: 760px;
background: #999;
margin: 0px auto;
}
#footer {
width: 920px;
background: #999;
margin: 0px auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
li {
float: left;
list-style: none;
padding: 34px;
}
.tile {
cursor: pointer;
background: red;
/*border: 2px solid #000;*/
width: 100px;
height: 100px;
}
#google {
background: #1E98DB;
}
.tile_image {
padding-left: 25px;
padding-top: 25px;
}
.tile p {
color: white;
font-size: 13px;
}
我做错了什么?