找不到CSS定义的字体

Sha*_*Wet 27 css webfonts

可能重复:
@ font-face无法在客户端站点上运行?

我在ASP.Net MVC Web应用程序中的此文件夹结构中有以下字体文件:

-[根]

| - 公开

|| --fonts

||| --NuvoWeb-Medi.eot

||| --NuvoWeb-Medi.woff

在我的CSS文件中,我有以下字体声明:

@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.eot);
}
@font-face 
{
    font-family: NuvoWeb;
    src: url(/Public/fonts/NuvoWeb-Medi.woff) format('woff');
}
Run Code Online (Sandbox Code Playgroud)

但是,当我运行应用程序时,Firebug会返回以下错误:

"NetworkError:404 Not Found - http:// localhost:60194/Public/fonts/NuvoWeb-Medi.woff "

请告知我缺少什么,以使其工作.

Sha*_*Wet 68

这里找到解决方案......

问题是IIS不知道如何提供这些新文件,除非我们告诉它如何.这可以<system.webServer>通过添加以下代码段在web.config的部分中的web.config中轻松完成:

<staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
    <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
    <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
    <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>
Run Code Online (Sandbox Code Playgroud)

请注意,其中一些扩展可能已经在IIS中处理(对我来说,.svg很好).您需要从此部分中删除这些地图,或者包含其他<remove>行,例如.eot.

  • 根据这个答案(http://stackoverflow.com/a/16708374),woff文件的MIME类型实际上是"application/font-woff".当我使用"font/x-woff"服务器正在传输MIME类型错误的字体时,我收到了Chrome的投诉.我改为"application/font-woff"并且投诉消失了. (4认同)
  • 谢谢你的有用帮助! (2认同)

小智 7

注册MIME类型web.config如下:

<system.webServer>
    <staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    </staticContent>
</system.webServer>
Run Code Online (Sandbox Code Playgroud)

这解决了这个问题.