Javascript FontAwesome无法在本地和electron应用程序中加载字体

我使用npm下载了FontAwesome，然后使用grunts复制任务将css文件和字体复制到我的electron应用程序根目录中的正确文件夹中

到目前为止还不错。一切都在它应该在的地方

现在，当我在我的应用程序中引用图标时，图标不会被加载。以下是我在控制台中遇到的错误：

无法解码下载的字体：
file:///path/to/fonts/fontawesome-webfont.woff2?v=4.4.0
OTS分析错误：无法将WOFF 2.0字体转换为SFNT

无法解码下载的字体：
file:////path/to/fonts/fontawesome-webfont.woff?v=4.4.0
OTS分析错误：WOFF头中的文件大小不正确

无法解码下载的字体：
file:////path/to/fonts/fontawesome-webfont.ttf?v=4.4.0
OTS分析错误：表目录的entrySelector不正确

我已经尝试通过删除所有版本参数来修改FontAwesome的css文件，但这似乎不是问题所在。通过

electron.

启动应用程序和在浏览器中查看html文件都会出现问题

更新

要回答一些评论：

• 这个问题发生在electron和浏览器中（在chrome和firefox中测试）
• 我正在使用这两个版本的最新版本，FontAwesome（4.4.0）和Electron（0.32.1）（通过npm全新安装）
• css的加载方式如下：

---

尝试以下操作，在CSS文件的开头调用字体，如下所示

@font-face {
    font-family: FontAwesome;
    src: url(../fonts/fontawesome-webfont.eot?v=4.0.3);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3) format('embedded-opentype'), 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');
    font-weight: 400;
    font-style: normal
}

---

问题在我的grunt文件中。我试图通过在他们的供应商网站上手动下载所有依赖项并将它们放在我的项目的相应脚本文件夹中来重现这个问题——突然它成功了

---

我现在改用大口大口喝，它仍然有效。不知道我在grunt上做错了什么…

如果您使用的是

bower

，您可以将

字体改写为：

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

在我的情况下，Git将该文件视为文本文件，并将其“行尾”弄乱。这破坏了文件

调整.gitconfig以将*.woff文件识别为二进制文件，然后删除该文件，并从中添加一个新副本，这为我解决了问题。
我也遇到了类似的问题（也许这个答案会对某些人有所帮助）。我使用Maven构建项目（Java+JS）。Maven过滤器插件损坏的二进制字体文件。我必须添加包括和排除：

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>


${project.sources}
真的
**/*沃夫先生
**/*.ttf
${project.sources}
假的
**/*沃夫先生
**/*.ttf
对于正在部署到IIS的某些人员，将其添加到web.config文件（主文件，而不是控制器目录中的文件）可能会有所帮助


我确信这已经解决了，但这对我来说很有效，所以。。。我要把这个留在这里：

我以前用过的字体也有同样的问题。原来这是由FTP问题引起的。文件上载为文本（ASCII）而不是二进制，这会损坏文件。我只是重新上传了字体文件，然后一切正常。
我面临同样的问题，使用API网关在AmazonS3上提供静态字体文件

我通过在AWS控制台上添加作为二进制媒体类型的
*/*
来修复它

有关
上二进制媒体类型管理的详细信息假定文件位于服务器上的物理位置，则会导致此问题，因为服务器不允许扩展名为
.woff
的文件。您必须在允许的MIME类型中添加
.woff
。在IIS中，转到IIS服务器>您的网站。单击IIS部分下的MIME类型，右键单击并添加新的MIME类型，文件扩展名为
.woff
和MIME类型
text/woff
@JSantosh，thx以获取注释。不幸的是，这些文件不在服务器上。他们应该用电子应用程序交付，所以基本上，他们是本地的。当你在浏览器中而不是在electron中打开HTML文件时，你会遇到同样的问题吗？@YanFoto，是的，这在electron和浏览器中都会发生。你能提供CSS片段来加载字体吗？不幸的是，这没有起到作用。顺便说一句，唯一改变的是版本参数。它甚至没有得到处理，因为我在本地尝试了这个。但无论如何，谢谢你回答得很好。。。它帮助我解决了这个问题。你不需要再次下载源代码，只需重新安装你的项目，就可以了。你也可以使用：svg woff woff2 ttf eot otf来完成同样的任务。第二个参考资料部分的“includes”有什么意义？为什么仅仅排除是不够的？@wrapperapps-AFAIK，如果你从资源中排除文件，它们将不会进入目标构建。你仍然必须包含它们，但没有过滤。对我来说，这也是咕噜声。复制时，我错误地将字体文件内容处理为字符串。哦，这可能也是我的错误。谢谢这也是我的错误所在。我必须像这样明确地从复制处理中排除文件：
选项：{process:processFiles，noProcess:['www/***.{png，gif，jpg，ico，psd，svg，ttf，otf，woff，woff2，eot}]}
你能再解释一下吗？要将文件视为二进制文件，我必须在
.gittributes
文件中添加以下行：
*.woff2-text diff
我也有同样的问题，将二进制媒体类型设置为/不适用于我。您是刚设置了二进制媒体类型还是更改了标题等？我想我遵循了指南，将内容处理值更改为“转换为二进制”。但我不是百分之百肯定，我是c