html - @ font-face未加载字体

我正在尝试使用@ 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;
}

我究竟做错了什么？

最佳答案

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

关于html - @ font-face未加载字体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14629382/