Chrome: Resource interpreted as Font but transferred with MIME type font/x-woff

时间:2022-09-11 21:45:08

    最近,项目中加入了Bootstrap进行界面优化,但是,项目加载运行之后,控制台总是提示以下错误信息:

    GET http://localhost:8080/.../fonts/fontawesome-webfont.woff2?v=4.3.0

    Resource interpreted as Font but transferred with MIME type font/x-woff:"http://localhost:8080/.../fonts/fontawesome-webfont.woff2?v=4.3.0"

    后来,在网上查找资料,了解到这是由于WOFF fonts缺少官方MIME类型定义引起的。WOFF fonts具有以下几种MIME类型:

  • font/x-woff
  • application/x-font-woff
  • application/font-woff
  • font/woff

    WOFF fonts的官方MIME类型是application/font-woff,但是默认的IIS7并没有定义WOFF fonts的官方MIME类型,所以他不知道该采用以上哪一种MIME类型对WOFF font文件进行操作,因此匹配的时候就会报404错误。

    解决方法:在IIS7中定义WOFF fonts的官方MIME类型application/font-woff。

    在web.config中加入以下代码:

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

    重新生成解决方案后运行,控制台就不会再报这个错误了。