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

FontAwesome fails to load fonts locally and in electron app

本文关键字：应用程序 加载 字体 FontAwesome      更新时间：2023-09-26

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

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

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

解码下载字体失败:
文件:///道路//字体/fontawesome-webfont.woff2 ? v = 4.4.0
OTS解析错误:将WOFF 2.0字体转换为SFNT失败

解码下载字体失败:
文件:////道路//字体/fontawesome-webfont.woff ? v = 4.4.0
OTS解析错误:WOFF报头

文件大小不正确

解码下载字体失败:
文件:////道路//字体/fontawesome-webfont.ttf ? v = 4.4.0
OTS解析错误:表目录

的entrySelector不正确

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

回答一些评论:

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

我有一个类似的问题(也许这个答案会帮助别人)。我使用Maven来构建项目(Java + JS)。Maven过滤器插件损坏了二进制字体文件。我必须添加include和exclude:

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

在我的情况下，Git将文件视为文本文件，并混淆了它的"行结尾"。这正在破坏文件。

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

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

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

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

对于一些正在部署IIS的人，将此添加到web。(主配置文件，而不是控制器目录中的配置文件)可能会有所帮助。

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

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

我现在切换到gulp，它仍然工作。

尝试以下方法，在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
}

如果您正在使用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
}

我确信这是解决了，但这对我来说是有效的，所以…我把它留在这里:

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

相关文章：