@font-face问题

发布于 2024-10-14 16:17:48 字数 968 浏览 6 评论 0原文

我以前做过这个，但还没有掌握。我从 fontsquirrel.com 下载了一个字体工具包，并尝试让我的自定义字体在我的网站上运行。我尝试了很多变体，包括网上找到的“防弹”方法，但现在我自己都感到困惑了。有人可以查看下面的代码并向我展示如何使用 @font-face 正确获取自定义字体以在网站上工作吗？

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

样式表 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;
}

有什么明显的吗？当然，它可以在我的机器上本地运行，因为我安装了字体。

原文

I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using @font-face?

I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.

The css for the style sheet fonts is:

@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;

The other styles sheets for layout, etc call the font like this:

}
#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;
}

Anything obvious? Of course, it works locally on my machine because I have the font installed.

分享到QQ

分享到微博