Javascript FontAwesome 无法在本地和电子应用程序中加载字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32475982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FontAwesome fails to load fonts locally and in electron app
提问by nozzleman
I have downloaded FontAwesome using npm and then copied the css-file and the fonts into the right folders in the root-diretory of my electron-application using grunts copy task.
我已经使用 npm 下载了 FontAwesome，然后使用 grunts 复制任务将 css 文件和字体复制到我的电子应用程序根目录中的正确文件夹中。
So far so good. Everything is where it is supposed to be.
到现在为止还挺好。一切都在它应该在的地方。
Now, when i am referencing FontAwesome in my app, the icons do not get loaded. These are the errors that I get in the console:
现在，当我在我的应用程序中引用 FontAwesome 时，图标不会被加载。这些是我在控制台中得到的错误：
Failed to decode downloaded font:
file:///path/to/fonts/fontawesome-webfont.woff2?v=4.4.0
OTS parsing error: Failed to convert WOFF 2.0 font to SFNTFailed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.woff?v=4.4.0
OTS parsing error: incorrect file size in WOFF headerFailed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.ttf?v=4.4.0
OTS parsing error: incorrect entrySelector for table directory
无法解码下载的字体：
file:///path/to/fonts/fontawesome-webfont.woff2?v=4.4.0
OTS 解析错误：Failed to convert WOFF 2.0 font to 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不正确
I have already tried to modify FontAwesome's css file by removing all the version parameters but this does not seem to be the problem. The Issues comes up both by starting the app via electron .and when viewing the html-file in the browser.
我已经尝试通过删除所有版本参数来修改 FontAwesome 的 css 文件，但这似乎不是问题。通过启动应用程序electron .和在浏览器中查看 html 文件时都会出现问题。
UPDATE
更新
To Answer some comments:
回答一些评论：
- This problem occurrs in electron as well as in the browser (tested in chrome and firefox)
- I am using the newest versions of both, FontAwesome (4.4.0) and Electron (0.32.1) (fresh install via npm)
- css is loaded like:
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
- 这个问题出现在电子和浏览器中（在chrome和firefox中测试）
- 我正在使用最新版本的 FontAwesome (4.4.0) 和 Electron (0.32.1)（通过 npm 全新安装）
- css加载如下：
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
采纳答案by nozzleman
The Problem was in my grunt-file. I tried to reproduce the issue by simply downloading all dependencies manually at their vendors websites and placed them in the corresponding script-folder of my project - suddenly it worked.
问题出在我的 grunt 文件中。我试图通过简单地在他们的供应商网站上手动下载所有依赖项并将它们放在我项目的相应脚本文件夹中来重现该问题 - 突然它起作用了。
I switched to gulp now and it still works. No idea what i was doing wrong with grunt though...
我现在切换到 gulp，它仍然有效。不知道我在咕噜声中做错了什么......
回答by Azee
I had a similar issue (perhaps this answer will help someone). I use Maven to build projects (Java + JS). Maven Filter Plugin corrupted binary font files. I had to add includes and excludes:
我有一个类似的问题（也许这个答案会帮助某人）。我使用 Maven 来构建项目（Java + JS）。Maven Filter Plugin 损坏了二进制字体文件。我不得不添加包括和排除：
<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>
回答by user892592
In my situation, Git was treating the file as a text file, and messing with its "line endings". This was corrupting the file.
在我的情况下，Git 将文件视为文本文件，并弄乱了它的“行尾”。这是破坏文件。
Adjusting the .gitconfig to recognize *.woff files as binary, then removing the file, and adding a new copy from https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont.woffsolved the issue for me.
调整 .gitconfig 以将 *.woff 文件识别为二进制文件，然后删除该文件，并从https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont添加一个新副本。 woff为我解决了这个问题。
回答by piercus
I faced same issue, using API Gateway to serve static font-files on Amazon S3.
我遇到了同样的问题，使用 API Gateway 在 Amazon S3 上提供静态字体文件。
I fixed it by adding */*as Binary Media Types on the AWS Console.
我通过*/*在 AWS 控制台上添加为二进制媒体类型来修复它。
More information on binary media types management on https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html
有关二进制媒体类型管理的更多信息，请访问https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html
回答by Stephen C
For some people who are deploying to IIS, adding this to web.config file (the main one, not the one inside Controller directory) might be of help.
对于一些部署到 IIS 的人来说，将此添加到 web.config 文件（主要的，而不是 Controller 目录中的文件）可能会有所帮助。
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
</staticContent>
</system.webServer>回答by monteirobrena
If you are using the boweryou could rewrite your font-faceto:
如果您使用的是bower您可以重写您font-face的：
@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
}
回答by Richard Zilahi
try the following, call the font-face as the following in the beginning of your CSS file.
尝试以下方法，在 CSS 文件的开头调用 font-face 如下。
@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
}
回答by Andre Aquiles
I'm sure this is solved, but this worked for me, so... I'm gonna leave this here:
我确定这已经解决了，但这对我有用，所以......我要把这个留在这里：
I just had the same issue with a font I had used before. Turned out this was caused by a problem with FTP. The file was uploaded as text (ASCII) instead of binary, which corrupted the file. I simply re-uploaded the font files, and then it all worked.
我之前使用过的字体也遇到了同样的问题。原来这是由FTP问题引起的。该文件以文本 (ASCII) 而不是二进制文件的形式上传，这会损坏文件。我只是重新上传了字体文件，然后一切正常。
