字体上的 Font-Awesome 错误 404答案

【问题标题】：Font-Awesome error 404 on fonts字体上的 Font-Awesome 错误 404
【发布时间】：2015-06-01 10:52:09
【问题描述】：

我不知道发生了什么，但在浏览器控制台中我可以看到 3 个与 font-awesome 相关的错误

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0

我知道这很荒谬，我自己无法弄清楚，但一切似乎都很好，在我的 index.html 中我有这样的东西

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

这就是我对字体真棒的事情的全部了解，我已经检查了路径，我没有错。

你们中有人发生过这种情况吗？

更新

这是我在标题中加载一些内容的 NGINX 部分

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

【问题讨论】：

您是否在服务器上上传了字体？
@Vucko 我该怎么做？

标签： css fonts font-awesome

【解决方案1】：

更好的是，将此部分添加到您的 web.config 中，然后这些 mime 类型将自动添加到您部署到的任何服务器上的 IIS 中。（删除是为了避免重复的 mime 类型错误，以防它们已经存在）

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

【讨论】：

如果文件未使用 mime 类型映射，则控制台中会显示有关丢失文件的消息。添加文件扩展名的定义和 mime 类型 fontawesome woff2 正确加载。谢谢。
对于运行 .NET Web 应用程序的人来说，这绝对是最实用的解决方案。
@jhoelz 对于通常无法直接访问 Web 服务器的 Web 开发人员来说，这是迄今为止最好的答案！真的非常感谢。
我在 Azure 上发布后遇到了这个问题。您的解决方案就像一个魅力。非常感谢。
这也适用于使用 Azure 应用服务部署其前端应用的人。例如，对于 Angular，将 web.config 文件放在 /src 文件夹下，然后调整 angular.json/angular-cli.json 以将 "src/web.config" 添加到资产数组中。之后，只需像往常一样将所有内容部署到 Azure。这样的 .woff/woff2 错误消失了。

【解决方案2】：

将 .woff 添加到您的应用程序服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff

【讨论】：

我必须输入两项，一项用于 woff，一项用于 woff2。像魅力一样工作。谢谢！

【解决方案3】：

我对 iis 也有同样的问题。我添加了一个新的 mime 类型，文件扩展名为“.woff2”，mime 类型为“font/x-woff”，问题解决了。

【讨论】：

【解决方案4】：

1.转到 IIS，找到你的网站，找到 MIME 类型， then click add

2.在附件名处加上“woff2” 将“application/font-woff”置于 Mime 类型

3.在 IIS 上重新启动您的网站

【讨论】：

【解决方案5】：

您提供的 URL 均无效且未链接到资源。据我们中的任何人都可以从您的帖子中看出 - 它们根本不存在。

您是否根据预期的文件夹结构正确上传文件？

【讨论】：

一切正常，直到我决定添加Content-Security-Policy，请参阅我的更新问题。你说的是哪些链接？
如果你说这个链接//www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 当然可以工作，这个www.desktop.just4bettors.mobi 是我正在处理的页面，不，但没有得到那些字体真棒部分的链接。
www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 和 www.desktop.just4bettors.mobi/bower_components/font-awesome/css/font-awesome。 css 都进入 404 Not Found。
那些链接是本地的，just4bettors 是我正在处理的域。
我的建议是快速尝试 CDN，看看是否能解决问题。您似乎在本地引用不正确，因此如果您可以引用 CDN 并且它可以正常工作，那么您就知道您在本地拥有的文件位于错误的位置。

【解决方案6】：

除以下解决方案外，上述解决方案均不适合我。请在 BundleConfig.cs 文件中的所有 'bundles.Add' 命令之后添加此行：

BundleTable.EnableOptimizations = false;

【讨论】：

这是一个奇怪的解决方案来消除 woff mime 错误。你关闭了包优化。
我同意你@hastrb，这很奇怪。

【解决方案7】：

我在仅允许 Apache2 网络服务器的“cPanel 共享主机服务器”上遇到了完全相同的问题。由于共享主机安全设置不允许使用“Access-Control-Allow-Origin”值的通配符 (*)（因为：带宽和资源窃贼），我必须想办法让它工作。

OP 提出的这个问题推断出 nginx，但接受且最受好评的答案似乎是针对 IIS 的。可能有人（像我一样）偶然发现了这个问题，正在寻找与 Apache 中的 CORS“权限”相关的 apache2 解决方案，所以这是我解决这个问题的灵丹妙药。我在 .htaccess 文件的 WP 站点根目录的tippy-top 中添加了以下内容：

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

我希望我能将 RegEX 魔法的这一神奇大块归功于我，但我在此帖子评论中解释了我是如何得出这个解决方案的：Access-Control-Allow-Origin wildcard subdomains, ports and protocols

** 明显注意：您需要更改域名以匹配您自己的。您可以删除 (|) RegEx OR 并仅使用单个域名，其中所有子域和根级域名都被 RegEx 接受

【讨论】：

【解决方案8】：

转至：http://fortawesome.github.io/Font-Awesome/get-started/

...使用 Bootstrap CDN 通过一行代码将 Font Awesome 添加到您的网站中。您甚至不必下载或安装任何东西！”

【讨论】：

用你分享的链接添加解释
CDN 通常只适用于搭建脚手架和测试内容。部署到生产环境时，最好将文件放在网络服务器上或拥有自己的 CDN。
如果您正在构建 Intranet 应用程序，这也可能不是一个好主意。

【解决方案9】：

我遇到了完全相同的问题和错误。删除我的 Font-Awesome 库并安装最新版本解决了这个问题。

【讨论】：

【解决方案10】：

将 .woff2 添加到您的应用服务器 mime 类型（例如 iis-> mime 类型）作为 application/font-woff

对我来说效果很好。

享受！！！

:)

【讨论】：