FontAwesome无法在本地和电子应用中加载字体

Question

我使用npm下载了FontAwesome,然后使用grunts copy任务将css文件和字体复制到我的电子应用程序的根目录中的右侧文件夹中.

到现在为止还挺好.一切都应该是它应有的地方.

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

无法解码下载的字体:
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文件时启动应用程序,可以解决问题.

UPDATE

回答一些意见:

• 这个问题在电子和浏览器中发生(在chrome和firefox中测试)
• 我使用的是FontAwesome(4.4.0)和Electron(0.32.1)的最新版本(通过npm全新安装)
• css加载如下: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >

Answer 1

我有一个类似的问题(也许这个答案会帮助某人).我使用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>

Answer 2

在我的情况下,Git将文件视为文本文件,并弄乱其"行结尾".这破坏了文件.

调整.gitconfig以将*.woff文件识别为二进制文件,然后删除该文件,并从https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome-webfont添加新副本. woff为我解决了这个问题.

Answer 3

对于部署到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>

Answer 4

使用API​​ Gateway在Amazon S3上提供静态字体文件时，我遇到了同样的问题。

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

有关二进制媒体类型管理的更多信息，请访问https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

Answer 5

问题出在我的 grunt 文件中。我尝试通过简单地在供应商网站上手动下载所有依赖项并将它们放入我的项目的相应脚本文件夹中来重现该问题 - 突然它起作用了。

我现在改用 gulp 了，它仍然有效。不知道我在咕噜声中做错了什么......