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。我使用@font-face generato中的fontsquirrel r工具来获取所有不同的字体变体

输出应该如下所示：

@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()）之外，还应该检查你的css是否值得关注，以确保没有任何内容将#header或其中的元素设置为font-weight: bold。由于您只指定了正常的权重/普通样式字体，如果某些内容使其变为粗体，则字体将不会显示。

Answer 3

试试这个：

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

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

Answer 4

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

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

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

Answer 5

简单的游戏。加载时，您应该在''：

之间输入名称

font-family：“测试”；

这肯定会起作用。

@ font-face没有加载字体

5 个答案: