0

我正在尝试创建一个类似Engadget的菜单栏。我似乎正确地实现了它，但我仍然没有得到确切的字体样式。请帮帮我。谢谢。这是我的小提琴。

我的 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
}

​</p>

4

2 回答 2

2

Engadget 使用名为Oswald的开放网络字体。您没有将它包含在您的源代码中，但它可以在 Google Web Fonts 上找到。 

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

这是您更新的小提琴。

于 2012-12-30T14:12:09.690 回答
2

您必须分别导入。链接字体！在 Engadget 的 css 中，您可以在样式 css 中看到它：

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

我将其更新为示例：http: //jsfiddle.net/5UMfe/2/

于 2012-12-30T14:12:41.750 回答