@ font-face问题

时间:2011-01-28 17:06:31

标签: css font-face embedded-fonts

我以前做过这个,但还是没有掌握它。我从fontsquirrel.com下载了一个字体工具包,并试图让我的自定义字体在我的网站上运行。我尝试了很多变化,包括在线发现的“防弹”方法,我现在已经把自己搞糊涂了。有人可以查看下面的代码,并告诉我如何正确地使用@ font-face在网站上使用自定义字体?

我有一个名为 fonts.css 的样式表,位于名为 css 的文件夹中。这用于调用自定义字体。字体文件位于名为 fonts 的根目录下的文件夹中。

样式表字体的css为:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/bebasneue-webfont.woff') format('woff'),
        url('../fonts/bebasneue-webfont.ttf') format('truetype'),
        url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
    font-weight: normal;
    font-style: normal;

布局等的其他样式表调用这样的字体:

}
#merchandise h1 {
    font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
    font-size: 33px;
    font-weight: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

有什么明显的吗?当然,它在我的机器上本地工作,因为我安装了字体。

1 个答案:

答案 0 :(得分:8)

#merchandise h1中,font-family: "Bebas Neue"必须为font-family: "BebasNeueRegular"

@font-face中,font-family: 'BebasNeueRegular'必须为font-family: 'Bebas Neue'