@ font-face不能正常工作

由於某些原因，我的@ font-face設置無法正常工作。@ 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; 
}

我在做什麼錯了？

來源

2011-01-20 Qcom