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

我做错了什么？

- GoodPie

---

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ - Dom

我会使用像Fiddler2、F12开发者工具（IE）或Chrome中的开发者工具这样的工具来查找试图加载字体文件时出现的404响应。也许路径不是你想象的那样。 - Cᴏʀʏ

错误：资源被解释为字体，但传输的 MIME 类型为 application/octet-stream：“file:///C:/Users/<user>/Desktop/Website/fonts/Minecraft.ttf”。 - GoodPie

我在这里回答了一个类似的问题：http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 - 97ldave

没有一些切实的信息，比如页面的URL，很难得到解决方案，因此问题可以被观察和研究。字体来源的信息也可能是至关重要的。（在网上看到损坏的字体并不罕见。） - Jukka K. Korpela

需要注意的一点是，只有在实际使用时才会下载字体。因此，如果您添加了新的字体URL指令，还应尝试通过CSS或样式规则使用它以导致字体被下载。 - FoxDeploy

Answer 1

Internet Explorer使用的是字体版本.woff，但你在代码中并没有使用该版本，而是应该使用.eot版本。我使用了@font-face生成器工具从fontsquirrel获取了所有不同的字体变体。

输出应该类似于这样：

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

- Alexander44

Answer 2

除了人们已经讨论过的不同字体类型（以及使用format()元素与url()一起），检查CSS继承以确保没有设置#header或其中的元素为font-weight: bold也是值得的。由于您只指定了正常权重/正常样式字体，如果某些东西使其变粗，字体将不会显示出来。

- Peter Elliott

Answer 3

将你的字体上传到FontSquirrel生成器中，它会将它们转换为不同浏览器支持的各种格式。

同时，该工具还会生成一段CSS代码，并且你只需要调整字体文件路径就可以使用它。

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

- Steph

---

好的，我已经完成了这个任务，并将它们放在我的字体文件夹中，复制了CSS（编辑它以查找字体文件夹），在示例中似乎完美运行，但在我的实际页面上，我收到了“无法加载资源”的错误提示。 - GoodPie

Answer 4

试试这个：

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

在你的代码中，你有两个文件夹：fonts和font，在我的例子中我使用了fonts。

- Alessandro Minoccheri

---

哦，字体文件夹，我在真正的代码中已经更改了它，它不会改变。 - GoodPie

如果你把文件夹“fonts”放到另一个文件夹中，会返回一些错误吗？ - Alessandro Minoccheri

资源解释为字体，但使用了MIME类型application/octet-stream进行传输："file:///C:/Users/<user>/Desktop/Website/fonts/Minecraft.ttf"。 - GoodPie

Answer 5

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

font-family: 'test';

这肯定会起作用。

- hma111