FontAwesome无法加载本地和电子应用程序中的字体 [英] FontAwesome fails to load fonts locally and in electron app

问题描述

我已经使用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.

UPDATE

回答一些意见：

• 此问题发生在电子以及浏览器中（在chrome和firefox中测试）


• 我使用的是最新版本


• css载入方式如下：< link rel = stylesheettype =text / csshref =css / font-awesome.css>

• 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" >

推荐答案

问题在我的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，它仍然工作。不知道我在做什么错误，虽然...

I switched to gulp now and it still works. No idea what i was doing wrong with grunt though...

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