ダウンロードされたフォントのデコードに失敗しました、OTS解析エラー：無効なバージョンタグ+レール4

アセットをプリコンパイルし、アプリケーションをプロダクションモードで実行しています。コンパイル後、インデックスページをロードすると、Chromeコンソールに次の警告が表示されます。

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

問題は、四角が表示される代わりにアイコンが読み込まれないことです。

カスタムフォントを使用し、コードは次のとおりです。

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot');
  src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
       font-url('icomoon.ttf') format('truetype'),
       font-url('icomoon.woff') format('woff'),
       font-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

何が足りないのかわかりません。私はたくさん検索して解決策も試しましたが成功しませんでした。開発モードではうまく機能していますが、プロダクションモードで四角が表示されている理由がわかりません。

まったく同じエラーが発生しましたが、私の場合、@font-face宣言のパスが間違っていることが原因であることがわかりました。私たちが使用している開発サーバー（live-server）は404：sでデフォルトのindex.htmlを提供するように構成されているため、Webインスペクターは404で不満を言うことはありません。セットアップの詳細を知らなければ、これが原因の可能性があります。

IISをサーバーおよび.net 4 / 4.5として実行している場合、Web.configに次のようにmime /ファイル拡張子の定義がない可能性があります。

<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" />
    </staticContent>
</system.webServer>

私は同じ問題を抱えていました。, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

フォントをコミットしようとしたときにこのエラーメッセージが表示された場合は、.gitattributes " warning: CRLF will be replaced by LF"に問題があります

この解決策は、.gitattributesで問題が発生しているフォントを追加することです

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

次に、破損したフォントファイルを削除し、新しいフォントファイルを再適用しました。

試す

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

ファイルの名前を application.css.scss

フォントが壊れていましたが、問題なく読み込まれているようで、Chromeのソースの下にdevtoolsが表示されているように見えましたが、バイト数が正しくないため、再度ダウンロードして解決しました。

次のように、@ font-faceでフォーマットを指定するだけです。

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

私は同じ問題を抱えていましたが、それはgitがこれらのファイルをテキストとして扱うためでした。そのため、ビルドエージェントでファイルをチェックアウトしている間、バイナリは維持されませんでした。

これを.gitattributesファイルに追加して試してください。

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

を使用する場合angular-cli、これは私にとってうまくいきます：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <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="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

次のエラーが発生しました：

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

生ファイルを直接以下からダウンロードした後に修正されました：
https //github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2。

問題は、ファイルのダウンロード時にプロキシエラーが発生したことです（HTMLエラーメッセージが含まれていました）。

GitHubで以下のアドレスにアクセスし、各FontAwesomeファイルをダウンロードします。

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

...ただし、リンクを右クリックして名前を付けて保存する代わりに、各ファイルをクリックし、[ダウンロード]ボタンを使用して保存します。

FontAwesomeファイルのバイナリ自体ではなく、HTMLページをダウンロードしてリンクを保存することがわかりました。

すべてのバイナリが揃ったら、うまくいきました。

私の問題は、2つのフォントを宣言していたことでした。scssは、フォントの名前を宣言することを期待しているようです。

あなた@font-face{} が宣言した 後 $my-font: "OpenSans3.0 or whatever";

そして、これは各フォントフェイスに対してです。

:-)

以下のために、角度-CLIおよびWebPACKをユーザIは、CSSファイルでフォントをインポート中に、いくつかの問題があることが疑われるので、また次のように単一引用符でエンコードされたURLの場所を提供してください-

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

この投稿は古いかもしれませんが、これは私のために働いたソリューションです。

同じ問題が発生しました。

フォントのバージョン（例?v=1.101）をフォントURLに追加すると、うまくいくはずです;）

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

フォントのTTFバージョンをクリック（右マウスクリック）し、コンテキストメニューで[情報を見る]（Mac OSX）[プロパティ]（Windows）を選択するだけで、フォントバージョンにアクセスできます。

Chromeを使用している場合は、以下に示すように、フォントのOpenType（OTF）バージョンを追加してみてください。

    ...
     url('icomoon.otf') format('opentype'),
    ...

乾杯！

ブートストラップを使用する場合は、ブートストラップのcss（bootstrap.min.css）ファイルとフォントファイルを更新します。この解決策で問題を修正しました。

IISでASP.NETを使用していますが、MIMEタイプをIISに追加するだけでよいことがわかりました。 '。woff2' / 'application / font-woff'

他の多くのアプローチ、および再インストールとチェックを何度も試みた後、Chromeから閲覧データ（キャッシュされた画像とファイル）を消去し、ページを更新することで問題を修正しました。

を開いて保存したときにも同じ問題が発生しました.woff。オプション付きのwoff2崇高なテキストを介してファイル。ファイルをSublimeに開かずにフォントフォルダーにコピーしたところ、問題は解決しました。EditorConfigend_of_line = lf

他の回答がうまくいかない場合は、以下を試してください。

1. .htaccessファイルを確認する

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. サーバーのキャッシュをクリアする

3. ブラウザのキャッシュをクリアしてリロード

フォントのcssファイルを確認してください。（fontawesome.css / fontawesome.min.css）、次のように表示されます。

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

フォントのファイル拡張子名の後にバージョンタグが表示されます。お気に入り：

-v = 4.6.3

このタグをcssファイルから削除するだけです。これを削除した後、フォントフォルダーに移動する必要があります。

そして、これらのフォントのファイルを形成し、バージョンタグ-v = 4.6.3を削除するだけです。し、ファイル名から。

そうすれば、問題は解決されます。

これが誰かに関係がある場合に備えて。Visual StudioでASP.NETとC＃を使用すると、まったく同じエラーが発生しました。ビジュアルスタジオ内からアプリを起動したときは機能しましたが、この問題が発生しました。その間に、私のプロジェクトへのパスに "＃"（c：\ C＃\ testapplication）という文字が含まれていることがわかりました。これはIIS Express（おそらくIISも）を混乱させるようで、この問題を引き起こします。"＃"はASP.NET以下のどこかで予約されている文字だと思います。パスを変更すると効果があり、期待どおりに機能するようになりました。

よろしくクリストフ

私を助けたのは、注文を変更したことです。最初に.eotが読み込まれますが、.eotの読み込みでエラーが発生しました。だから私は.eotをwoff2の最初のsrcとして捨て、エラーはなくなりました。

だからコードは今です：

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

そしてありました：

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

私は同じ問題を抱えていました、これは私にとってはうまくいきましたhttps://github.com/webpack/webpack/issues/1468