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

【问题标题】：FontAwesome fails to load fonts locally and in electron appFontAwesome 无法在本地和电子应用程序中加载字体
【发布时间】：2015-12-05 05:05:16
【问题描述】：

我已经使用 npm 下载了 FontAwesome，然后使用 grunts 复制任务将 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 文件时都会出现问题。

更新

回答一些cmets：

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

【问题讨论】：

假设您在服务器上的物理位置有文件，这个问题是因为服务器不允许带有.woff 扩展名的文件。您必须在允许的 MIME 类型中添加 .woff。在 IIS 中，转到 IIS 服务器 > 您的网站。单击 IIS 部分下的 MIME 类型，然后右键单击并添加新的 MIME 类型，文件扩展名为 .woff 和 MIME 类型 text/woff
@JSantosh，感谢您的评论。不幸的是，这些文件不在服务器上。他们应该通过电子应用程序交付，所以基本上，他们在本地。
在浏览器中打开HTML文件而不是electron时是否也遇到同样的问题？
@YanFoto，是的，这发生在电子和浏览器中。
能否提供用于加载字体的 CSS sn-p？

标签： javascript css gruntjs font-awesome electron

【解决方案1】：

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

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

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

【讨论】：

我有同样的问题，将二进制媒体类型设置为 / 对我不起作用。您是刚刚设置了二进制媒体类型还是还更改了标头等？
我想我遵循了指南并将内容处理值更改为“转换为二进制”。但我不能 100% 确定，我现在不能仔细检查。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

你回答得很好......它帮助我解决了这个问题。
您无需再次下载源代码，只需对您的项目进行全新安装，即可使用
你也可以使用：svgwoffwoff2ttfeototf
第二个资源部分的“包含”有什么意义？为什么仅仅排除还不够？
@wrapperapps - AFAIK，如果您从资源中排除文件，它们将不会进入目标构建。您仍然必须包含它们，但不进行过滤。

【解决方案5】：

在我的情况下，Git 将文件视为文本文件，并弄乱了它的“行尾”。这破坏了文件。

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

【讨论】：

要将文件视为二进制文件，我必须在.gitattributes 文件中添加以下行：*.woff2 -text diff

【解决方案6】：

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

【讨论】：

你能再解释一下吗？

【解决方案7】：

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

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

【讨论】：

对我来说也是 Grunt。复制时我错误地将字体文件内容处理为字符串。
哦，这也可能是我的错误。谢谢！
这也是我的错误。我必须像这样从复制处理中明确排除文件：options: { process: processFiles, noProcess: ['www/**/*.{png,gif,jpg,ico,psd,svg,ttf,otf,woff,woff2,eot}']}

【解决方案8】：

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

【讨论】：

不幸的是，这并没有成功。顺便说一句，唯一改变的是版本参数。它甚至没有得到处理，因为我在本地尝试过。但无论如何，谢谢。