@ font-face功能不起作用

时间:2010-12-19 20:24:35

标签: html css fonts css3 embedded-fonts

似乎无法在任何浏览器中使用此功能,任何人都知道我做错了什么?

在这里现场直播:http://daveywhitney.com/ford/one/

@font-face {
    font-family: 'SackersItalianScriptStdRegula';
    src: url('font/sackersitalianscriptstd-webfont.eot');
    src: url('font/sackersitalianscriptstd-webfont.woff') format('woff'), url('font/sackersitalianscriptstd-webfont.ttf') format('truetype'), url('font/sackersitalianscriptstd-webfont.svg#webfontkWmYBTH2') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EngraversMTRegular';
    src: url('font/engr-webfont.eot');
    src: url('font/engr-webfont.woff') format('woff'), url('font/engr-webfont.ttf') format('truetype'), url('font/engr-webfont.svg#webfontQUS0Zswo') format('svg');
    font-weight: normal;
    font-style: normal;
}    

#sidetop {
    width:90px;
    height:50px;
    font-size: 12px;
    font-family:EngraversMTRegular;
}

#sidetop ul li {
    float:right;
    margin:0 0 10px 0;
    font-family:EngraversMTRegular;
}

#names {
    width:150px;
    height:250px;
    float:right;
    overflow-y: scroll;
    font-size:30px;
    font-family:SackersItalianScriptStdRegula;
    color:#858484;
    margin:0 0 0 50px;
    font-weight:normal;
}

2 个答案:

答案 0 :(得分:1)

网址错误。例如,我在这里没有得到字体文件:

http://daveywhitney.com/ford/one/css/font/engr-webfont.woff

答案 1 :(得分:1)

您在字体文件中的路径不是您在此处发布的内容。在CSS文件中,您的网址如下所示:url('/font/engr-webfont.eot')。这意味着您的字体应该位于http://daveywhitney.com/font/engr-webfont.eot。前导斜杠使url相对于服务器根目录而不是样式表。也许您可以告诉我们您的目录结构是什么样的 - 而不是让我们猜测事物 - 字体与css文件相关的位置。