Html @font-face 未加载字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14629382/
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 not loading font
提问by GoodPie
I am trying to use @font-face and for some reason it is failing to work (IE9, Chrome and Firefox). I have made sure that I am pointing to the correct directory when loading the font however it still doesn't seem to work.
我正在尝试使用 @font-face，但由于某种原因它无法正常工作（IE9、Chrome 和 Firefox）。我确保在加载字体时指向正确的目录，但它似乎仍然不起作用。
Here is my code:
这是我的代码：
@font-face{
font-family: 'test';
src: url('../fonts/FontName.ttf'),
url('../fonts/FontName.eot');
font-weight: normal;
font-style: normal;
}
And calling it:
并称之为：
#header{
text-align:left;
padding: 10px;
font-family:test;
}
What am i doing wrong?
我究竟做错了什么？
采纳答案by Alexander44
Internet Explorer uses the version .woff of the font, which is not used by you in the code, instead of using the version .eot. I used the @font-face generator tool from fontsquirrelto get all the different font variations
Internet Explorer 使用字体的 .woff 版本（您在代码中未使用），而不是使用 .eot 版本。我使用了fontsquirrel的@font-face 生成器工具来获取所有不同的字体变体
The output should look something like this:
输出应如下所示：
@font-face{
font-family: 'test';
src: url('../fonts/FontName.eot'),
url('../fonts/FontName.eot?#iefix') format('embedded-opentype'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
回答by Peter Elliott
in addition to what people have been saying about the different types of fonts (and using the format()element along with url()), it would also be worthwhile to check your css inhertiance to make sure that nothing is setting #headeror the elements inside of it to font-weight: bold. Since you only specify a normal weight/normal style font, if something makes it bold, the font won't show up.
除了人们一直在谈论不同类型的字体（以及将format()元素与 一起使用url()）之外，检查您的 css 继承性以确保没有设置任何内容#header或其中的元素为font-weight: bold. 由于您只指定了正常粗细/正常样式字体，因此如果某些内容使其加粗，则该字体将不会显示。
回答by Steph
Run your fonts through the FontSquirrel generator and it will convert them to the various formats supported by different browsers.
通过 FontSquirrel 生成器运行您的字体，它会将它们转换为不同浏览器支持的各种格式。
It should also give you a blob of CSS that you can use, just adjust the paths to the font files.
它还应该为您提供一组可以使用的 CSS，只需调整字体文件的路径即可。
回答by Alessandro Minoccheri
Try this:
尝试这个：
@font-face{
font-family: 'test';
src: url('../fonts/Minecraft.ttf'),
url('../fonts/minecraft.eot');
font-weight: normal;
font-style: normal;
}
In your code you have two folder: fonts and font, in my example I have used fonts
在您的代码中，您有两个文件夹：fonts 和 font，在我的示例中，我使用了 fonts
回答by hma111
Easy game. When loading it, you should out the name between ' ':
轻松的游戏。加载它时，您应该去掉' '之间的名称：
font-family: 'test';
字体系列：'测试'；
This will surely work.
这肯定会奏效。
