FontAwesome 无法在本地和电子应用程序中加载字体-前端问题

FontAwesome fails to load fonts locally and in electron app(FontAwesome 无法在本地和电子应用程序中加载字体)

本文介绍了FontAwesome 无法在本地和电子应用程序中加载字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

到目前为止一切顺利.一切都在它应该在的地方.

So far so good. Everything is where it is supposed to be.

现在，当我在我的应用程序中引用 FontAwesome 时，图标不会被加载.这些是我在控制台中遇到的错误:

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:

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

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 SFNT

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

Failed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.woff?v=4.4.0
OTS parsing error: incorrect file size in WOFF header

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

Failed to decode downloaded font:
file:////path/to/fonts/fontawesome-webfont.ttf?v=4.4.0
OTS parsing error: incorrect entrySelector for table directory

我已经尝试通过删除所有版本参数来修改 FontAwesome 的 css 文件，但这似乎不是问题.通过 electron . 启动应用程序以及在浏览器中查看 html 文件时都会出现问题.

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.

更新

回答一些评论:

此问题出现在电子和浏览器中(在 chrome 和 firefox 中测试)
我使用的是最新版本的 FontAwesome (4.4.0) 和 Electron (0.32.1)(通过 npm 全新安装)
css 的加载方式如下:


推荐答案
问题出在我的 grunt 文件中.我试图通过简单地在他们的供应商网站上手动下载所有依赖项并将它们放在我项目的相应脚本文件夹中来重现该问题 - 突然它起作用了.
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. 
我现在切换到 gulp，它仍然有效.不知道我在 grunt 上做错了什么......
I switched to gulp now and it still works. No idea what i was doing wrong with grunt though...

                        这篇关于FontAwesome 无法在本地和电子应用程序中加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！