@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

简单的游戏。加载时，你应该在''之间输出名称：

字体系列：'测试'；

这肯定会奏效。

Answer 2

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

输出应如下所示：

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

除了人们一直在谈论不同类型的字体（以及使用format() 元素和url()）之外，检查你的css 继承以确保没有设置@ 也是值得的987654323@ 或其中的元素到font-weight: bold。由于您只指定了正常粗细/正常样式的字体，因此如果将其变为粗体，则该字体将不会显示。

Answer 4

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

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

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

Answer 5

试试这个：

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

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