web-dev-qa-db-ja.com

FontAwesomeがローカルおよびElectronアプリでフォントをロードできない

Npmを使用してFontAwesomeをダウンロードしてから、cssファイルとフォントをgruntsコピータスクを使用して電子アプリケーションのルートディレクトリ内の適切なフォルダーにコピーしました。

ここまでは順調ですね。すべてが本来あるべき場所です。

これで、アプリで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" >
javascriptcssgruntjsfont-awesomeelectron
36
nozzleman

問題は私のうなり声ファイルにありました。ベンダーのWebサイトですべての依存関係を手動でダウンロードし、プロジェクトの対応するスクリプトフォルダーに配置するだけで、問題を再現しようとしました-突然動作しました。

Gulpに切り替えましたが、それでも動作します。しかし、私はうなり声で何が間違っていたのか分かりません...

3
nozzleman

私は同様の問題を抱えていました（おそらくこの答えが誰かを助けるでしょう）。 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>
62
Azee

私の状況では、Gitはファイルをテキストファイルとして扱い、その「行末」をいじっていました。これによりファイルが破損していました。

* .woffファイルをバイナリとして認識するように.gitconfigを調整してから、ファイルを削除し、 https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/から新しいコピーを追加しますfontawesome-webfont.woff は問題を解決しました。

27
user892592

API Gatewayを使用してAmazon S3で静的フォントファイルを提供する同じ問題に直面しました。

AWSコンソールで*/*をバイナリメディアタイプとして追加することで修正しました。

https://docs.aws.Amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html のバイナリメディアタイプ管理の詳細

5
piercus

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>
5
Stephen C

以下を試して、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
}
1
Richard Zilahi

bowerを使用している場合、font-face to：

@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
}
1
monteirobrena

私はこれが解決されたと確信していますが、これは私のために働いたので...私はこれをここに残すつもりです：

以前使用したフォントで同じ問題が発生しました。これはFTPの問題が原因であることが判明しました。ファイルがバイナリではなくテキスト（ASCII）としてアップロードされたため、ファイルが破損しました。フォントファイルを再度アップロードしただけで、すべて正常に機能しました。

0
Andre Aquiles