浏览器无法渲染WOFF字体（@font-face）

Question

好的，我有一个问题无法解决，我试图研究WOFF字体在Internet Explorer 10中的使用。

我从fontsquirrel下载了工具包，并根据其中包含的CSS和HTML文件将字体添加到Web应用程序中（在IIS 7上使用ASP.NET MVC）。

现在，TTF字体在Firefox和Chrome中可以完美地工作（IE不支持），但是WOFF字体似乎根本不起作用（所有新浏览器都应该支持它）。如果我从下面删除TTF部分，Firefox和Chrome也不会呈现WOFF字体。

我三倍检查并简化了文件名，以确保这不是问题所在。

@font-face
{
    font-family: 'KaratulaNormal';
    src: url('fonts/karan.woff') format('woff'), 
         url('fonts/karan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1
{
    text-transform: uppercase;
    font-family: KaratulaNormal;
}

为什么WOFF字体无法使用？

我知道这可能很难回答，但如果有任何解决问题的建议，请提出。

- Sebastian K

Answer 1

太好了。我一步一步地进行尝试，经过几次尝试后，我意识到如果我使用原始的kit WOFF字体，它们实际上可以工作。之后我意识到我的代码实际上也可以工作，但只有在直接从文件系统运行时才能工作，而不是通过IIS。一旦我意识到这一点，一些谷歌搜索引导我找到了答案：http://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/。基本上，在IIS7下，您需要为WOFF字体配置mime类型，否则IIS无法提供它们。

- Sebastian K

---

我知道这是一个有点老的帖子，但链接现在已经失效了。由于我自己也遇到了这个问题，所以我想分享一下我如何将mime类型添加到web config中。我发现本地我没有遇到这个问题，woffs被服务并且当已经定义时添加mime类型会导致错误，因此在<system.webserver>下我添加了以下内容： <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> </staticContent> - Anglefroghammer