网络错误：404未找到fontawesome-webfont.woff？v=4.0.3

Question

每次加载我的应用程序页面时，我都会收到这个错误消息。 我正在使用Apache。以下是我的css代码。

 

url（'../fonts/fontawesome-webfont.woff?v=4.0.3'）format（'woff'）

Firefox 报错

 

"NetworkError：404 Not Found url ... / fonts / fontawesome-webfont.woff？v=4.0.3

而Chrome则显示：

 

GET url ... / fonts / fontawesome-webfont.woff？V=4.0.3 404（未找到）

有人可以告诉我如何解决这个问题吗？ 先谢谢了。

- Zeshan

---

我们需要了解您的目录结构。父文件加载.woff文件的位置在哪里？404只是意味着您指向的文件不存在或“文件未找到”。 - Silvertiger

字体文件与其他字体文件（.ttf、.svg）在同一个文件夹中，它们能正常工作。CSS链接也与其他字体相同。url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); - Zeshan

在这种情况下，URL 中可能有错别字吗？那里是否有一个不应该有的大写字母等等？ - Silvertiger

我已经仔细检查了URL，里面没有任何问题。 这是我的目录结构。 approot(assets/fonts/fontfiles, assets/css/cssfiles) 我在CSS文件中使用相对URL来指向字体文件。 - Zeshan

同样在本地主机上，它可以正常工作，但在实际环境中却抛出了404错误。 - Zeshan

Answer 1

这对我有用：

将以下行添加到您的web.config文件中

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

您需要添加这些行，因为默认情况下，Apache未配置.woff作为默认的MIME类型。 Apache默认MIME类型。 这也适用于IIS。正如Seb Duggan在这里解释的那样：IIS默认MIME，默认情况下，服务器不会提供.woff文件。

- HowieH

---

我应该为Tomcat做些什么？ - Jerry

Answer 2

我已经在我的IIS Web服务器中更新了mime类型，这解决了我的问题。

Extention > .ttf    MimeType > application/x-font-ttf
Extention > .woff   MimeType > application/x-font-woff
Extention > .woff2  MimeType > application/x-font-woff2

我不需要改变web.config中的任何内容。然而，IIS最终会更新web.config。

- Mahib

---

完美的答案！谢谢 - Guido Lo Spacy

Answer 3

我也可以通过在你的web.config的handlers下添加文件类型来解决此问题，适用于任何使用.net、angular等应用程序。你可以在IIS上设置web.config。

     <handlers>
     <add name="fonts" path="*.woff" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     <add name="fonts2" path="*.woff2" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
     </handlers>

- Cesar Vega

---

配置 -> SystemWebServer -> 处理程序 - curiousBoy

Answer 4

在URL之前加上“src:”，例如：

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');    
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');    
  src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');    
  src: url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');    
  src: url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');    
  src: url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');    
  font-weight: normal;    
  font-style: normal;
}

- Subhan Raza

---

这是我们唯一的解决方案，对我们起作用的是teak。我们的网站位于一个文件夹下。“https://myweb.com/mysite”。我们遇到的错误是“GET https://myweb.com/mysite/Areas/Mechanical/Content/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED 404 (Not Found)”。我们将“mysite”文件夹添加到font-awesome.min.css字体中，如“src: url('../mysite/fonts/fontawesome-webfont.eot?v=4.7.0');”。 - Kagan Agun

当使用Apache上的常规Web托管时，此方法有效。 - swordfish81

Answer 5

我不知道为什么已接受的答案对我不起作用，但是我复制了以下配置使其工作：

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>

- Usman Khalid

Answer 6

如果您使用的是IIS 6，您可以通过向IIS添加Mime来解决问题:

- mjhdesigner

Answer 7

如果您无法访问您的Web服务器配置，您也可以将文件重命名为以svg结尾（但保留格式）。在Chrome和Firefox中对我来说效果很好。

- Phil McCarty

Answer 8

如果以上解决方案都不适用于您，请尝试此解决方案。在App_Start文件夹中的BundleConfig.cs文件中，将BundleTable.EnableOptimizations设置为false，具体方法请参考stackoverflow页面中的说明。但是，这样做会失去捆绑所带来的好处，例如减少浏览器http请求的数量。

- Kagan Agun