css我想错过什么来模仿这个字体

Question

我尝试在photoshot上设计我的菜单，结果是

但是当我尝试做同样的想法但是当css时，我得到了这个结果：

虽然我尝试做同样的事情，但字体和字体重量有点不同，

无论如何，你能不能告诉我，我可以像第一个那样制作第二个图像字体？

http://jsfiddle.net/JmF36/

文本位于具有此样式的#sidebar ID上：

#main-nav > li > a {
width: 100%;
font-size: 13px;
font-weight: normal;
text-decoration: none;
color: #FFF;
display: inline-block;
padding: 11px 18px 11px 18px;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

我已经在#sidebar

中设置了字体

#sidebar {
font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
background: #666666 url(../img/sidebar-bg.png);
background-repeat: repeat;
}

Answer 1

• 对于信息中心，示例页等父菜单......

  将font-size从13px更改为1.1 em和 将font-weight更改为lighter

• 对于常规元素，扩展元素等子菜单等...

  将font-size从12 px更改为1 em

查看JSFiddle

Answer 2

我自己找到了这个解决方案：）

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxn5HxGBcBvicCpTp6spHfNo.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxkCDe67GEgBv_HnyvHTfdew.woff) format('woff');
}