出于某种原因,我的@font-face的设置是正确运作的。
The website Im working on his place here。
奇怪的是,我使用了。 就像我以前一样,但现在似乎并没有正确开展工作。
我的超文本索引网页载有与外部风格表格链接的内容:
<!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.cs案(由老体引发的风格):
@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;
}
最后,这是我的一般风格、风格。
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;
}
我做了什么错误?