资源被解释为字体,但传输的MIME类型为application/x-font-woff。

58

我按照qooxdoo文档中的Web 字体教程,将一个 web 字体添加到 Font.js 中,但我注意到在 Chrome 的开发者控制台中出现了警告:

我的代码如下:

/* ************************************************************************
  #asset(myApp/fonts/*)
************************************************************************ */
qx.Theme.define("myApp.theme.Font",
{
  extend : qx.theme.simple.Font,

  fonts :
  {
    "silkscreen" :
    {
        size: 8,
        lineHeight: 1,
        family: [ "silkscreen", "Tahoma" ],
        sources:
        [
            {
                family: "Silkscreen",
                source:
                [
                    "myApp/fonts/slkscr-webfont.eot",
                    "myApp/fonts/slkscr-webfont.ttf",
                    "myApp/fonts/slkscr-webfont.woff",
                    "myApp/fonts/slkscr-webfont.svg#silkscreen"
                ]
            }
        ]
    }
  }
});

我该如何解决浏览器警告?

2个回答

97
根据 W3C 规范,正确的 MIME 类型为 application/font-woff,因此在提供 .woff 文件时,需要配置您的Web服务器以使用该类型。

6
它起作用了。在我的Apache服务器配置文件的httpd.conf中添加了AddType application/font-woff .woff这一行(然后重新启动服务器)后,警告消失了。 - Raptor
尝试了这个解决方案,问题仍然存在。这是在使用EasyPHP的开发环境中。 - sq2
默认值是由Apache基金会设置的吗?我们能否让他们更新它? - Ben Harold
2
更新:我向Apache基金会提交了一个错误报告。希望他们在未来的版本中更新默认值。 - Ben Harold
1
以下规则适用于我:AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff .woff AddType application/font-woff .woff - iamdash
1
@iamdash,感谢您发布与其他字体类型相关的配置文件。但是第二个.woff指令是否只覆盖了第一个指令呢?换句话说,我认为您实际上只是将.woff设置为应用程序/字体-woff,而倒数第二个指令(“AddType应用程序/x-font-woff .woff”)从未应用。 我认为特别针对.woff,Daniel Wagner的答案仍然是正确的。PS:我曾经看到过这个控制台错误,但在最新版本的Chrome(29.0.1547.65,在OSX上)中,我的.woff字体具有应用程序/ x-font-woff的类型,并且不会触发控制台错误。也许现在Chrome正在抑制该错误? /$.02 - cweekly

85

如果您正在使用IIS Web服务器,请尝试以下方法:

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" /> 
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

是的,如果Web服务器在IIS中,则这就是已接受答案的含义。不需要使用 # 标记,对吗? - Raptor

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接