CSS @font-face 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4830984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face issues
提问by Diventare Creative
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?
我以前做过这个，但仍然没有掌握它。我从 fontsquirrel.com 下载了一个字体工具包，并试图让我的自定义字体在我的网站上工作。我尝试了很多变体，包括在网上找到的“防弹”方法，现在我自己都弄糊涂了。有人可以看看下面的代码并告诉我如何使用@font-face 正确地让自定义字体在网站上工作吗？
I have a style sheet named fonts.csslocated 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.
我有一个名为fonts.css的样式表，位于名为css的文件夹中。这用于调用自定义字体。字体文件位于根目录下名为fonts的文件夹中。
The css for the style sheet fontsis:
样式表字体的 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;
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.
有什么明显的吗？当然，它可以在我的机器上本地运行，因为我安装了字体。
回答by Josh Stodola
In #merchandise h1, font-family: "Bebas Neue"needs to be font-family: "BebasNeueRegular"
在#merchandise h1，font-family: "Bebas Neue"需要是font-family: "BebasNeueRegular"
or
或者
In @font-face, font-family: 'BebasNeueRegular'needs to be font-family: 'Bebas Neue'
在@font-face，font-family: 'BebasNeueRegular'需要是 font-family: 'Bebas Neue'
