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

Question

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

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

现在，当我在我的应用程序中引用 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 SFNT

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

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 文件时都会出现问题。

更新

回答一些评论：

这个问题出现在electron和浏览器中（在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

尝试以下操作，在 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
}

Answer 2

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

我现在切换到 gulp，它仍然有效。不知道我在 grunt 上做错了什么......

Answer 3

如果您使用的是 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
}

Answer 4

在我的情况下，Git 将文件视为文本文件，并弄乱了它的 "line endings"。这正在破坏文件。

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

Answer 5

我遇到了类似的问题（也许这个答案会对某人有所帮助）。我使用 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>

Answer 6

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

我确定这已经解决了，但这对我有用，所以...我要把它留在这里：

我之前使用的字体也遇到了同样的问题。原来这是由 FTP 的问题引起的。文件以文本 (ASCII) 而不是二进制格式上传，这会损坏文件。我只是重新上传了字体文件，然后一切正常。

Answer 8

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

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

https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

上有关二进制媒体类型管理的更多信息

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

FontAwesome fails to load fonts locally and in electron app

javascript

css

gruntjs

font-awesome

electron