Engadget like menu - 字體不匹配

我想創建一個菜單欄，如Engadget。我似乎正確實施它，但仍然沒有得到確切的字體樣式。請幫助我。謝謝。這是我的fiddle。Engadget like menu - 字體不匹配

我的HTML，

<div class="nav"> 
<ul> 
<li><a href="#">Reviews</li> 
</ul> 
</div>

我的CSS，

.nav{ 
     background:#303030; 
     line-height:1; 
     overflow:hidden; 
     position:relative; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 

} 

.nav a{ 
     color:#fff; 
     text-decoration:none;   
     font-family: Oswald,Arial Narrow,Arial,Helvetica,sans-serif !important; 
     text-transform:uppercase !important; 
     font-size:14px !important; 
     margin-right:10px; 
     padding:10px; 
     display: block; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     font-weight:lighter; 

} 
.nav li{ 
     float:left; 
     overflow:hidden 
} 
.nav ul{ 
     list-style:none; 
     margin:0; 
     overflow:hidden; 
     padding:0; 
     width:100% 
} 
.nav ul a:hover 
{ 
     color:#FFF; 
     background-color:#454545 !important;      
} 
.nav ul,nav ol 
{ 
     list-style:none; 
     list-style-image:none 
}

來源

2012-12-30 Fahad Uddin

您必須導入resp。鏈接字體！在癮科技的CSS，你可以看到它的風格CSS：

@font-face { 
    font-family: "Oswald"; 
    src: url("http ...

我更新了它作爲例子：http://jsfiddle.net/5UMfe/2/

來源

2012-12-30 14:12:41 Chris

詳情請參閱Andy的回答;） – Chris

對@ font-face規則使用+1，但您可能會遇到IE8等較舊瀏覽器的問題。使用Google Web字體的@import方法可以節省額外的麻煩。 –

要了解有關使用Google Web Fonts的詳細信息，請看： https://developers.google.com/webfonts/docs/getting_started。在那裏你也可以找到一些例子。 – Chris

癮科技使用名爲奧斯瓦爾德一個開放的Web字體。您沒有將其包含在您的來源中，但它是available on Google Web Fonts。

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);

這是your updated fiddle。

來源

2012-12-30 14:12:09

...和另一個更新[撥弄着有效的HTML（HTTP：// jsfiddle.net/5UMfe/3/），使結果更好一些。 –

Engadget like menu - 字體不匹配

回答

相關問題