html - @font-face 不加载字体

Question

我正在尝试使用@font-face，但由于某种原因它无法工作（IE9、Chrome 和 Firefox）。我确保在加载字体时指向正确的目录，但它似乎仍然不起作用。

这是我的代码：

@font-face{
font-family: 'test';
src: url('../fonts/FontName.ttf'),
         url('../fonts/FontName.eot');
font-weight: normal;
font-style: normal;
}

并称它为：

#header{
text-align:left;
padding: 10px;
font-family:test;
}

我究竟做错了什么？

Answer 1

Internet Explorer 使用您在代码中未使用的字体的 .woff 版本，而不是使用 .eot 版本。我使用fontsquirrel的@font-face 生成器工具来获取所有不同的字体变化

输出应如下所示：

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

Answer 2

除了人们一直在谈论不同类型的字体（以及将format()元素与. 由于您只指定了正常粗细/正常样式的字体，因此如果将其变为粗体，则该字体将不会显示。url()#headerfont-weight: bold

Answer 3

通过 FontSquirrel 生成器运行您的字体，它将它们转换为不同浏览器支持的各种格式。

它还应该为您提供可以使用的 CSS 块，只需调整字体文件的路径即可。

http://www.fontsquirrel.com/fontface/generator

Answer 4

试试这个：

@font-face{
font-family: 'test';
src: url('../fonts/Minecraft.ttf'),
         url('../fonts/minecraft.eot');
font-weight: normal;
font-style: normal;
}

在您的代码中，您有两个文件夹：字体和字体，在我的示例中，我使用了字体

Answer 5

轻松的游戏。加载它时，您应该在“ ”之间输出名称：

字体系列：'测试'；

这肯定会奏效。