Question

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

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

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

无法解码下载的字体：
  file：///path/to/fonts/fontawesome-webfont.woff2?v = 4.4.0
  OTS解析错误：无法将WOFF 2.0字体转换为SFNT

无法解码下载的字体：
  文件：////path/to/fonts/fontawesome-webfont.woff V = 4.4.0
  OTS解析错误：WOFF标题中的文件大小不正确

无法解码下载的字体：
  文件：////path/to/fonts/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" >

Answer 1

我有一个类似的问题（也许这个答案对某人有帮助）。我使用Maven来构建项目（Java + JS）。 Maven Filter Plugin损坏了二进制字体文件。我不得不添加包含和排除：

    listview.setOnScrollListener(new AbsListView.OnScrollListener() {

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {
            int position = listview.getFirstVisiblePosition();

            SCROLL_STATE = position;

            if (SCROLL_STATE == 0) {
                listview.notifyDataSetChanged();  // Here is a problem, because it's not work
            }

        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

        }
    });

Answer 2

在我的情况下，Git将文件视为文本文件，并且弄乱了它的＆＃34;行结尾＆＃34;。这破坏了文件。

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

Answer 3

对于部署到IIS的某些人，将其添加到web.config文件（主文件，而不是Controller目录中的文件）可能会有所帮助。

＆＃13;

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

＆＃13;

Answer 4

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

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

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

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

Answer 5

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

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

我刚才遇到过与之前使用的字体相同的问题。原来这是由FTP问题引起的。该文件以文本（ASCII）而不是二进制文件的形式上载，这会损坏文件。我只是重新上传了字体文件，然后一切正常。

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

6 个答案: