web-dev-qa-db-ja.com

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

私はアセットをプリコンパイルし、アプリケーションをプロダクションモードで実行しています。私のインデックスページをロードしたときにコンパイルした後、私はクロムコンソールで以下の警告を受けました：

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

私は私の終わりから何が欠けているのかわかりません。私はよく検索しても解決策を試してみましたが、成功しませんでした。開発モードでは問題なく動作していますが、なぜ生産モードで表示されているのかわかりません。

cssasset-pipelineruby-on-rails-4.1custom-font
118
Deepti Kakade

私はまったく同じエラーを得ました、そして私の場合、それは@font-face宣言への間違ったパスが原因であることが判明しました。私たちが使用している開発サーバー（live-server）は、どの404でもデフォルトのindex.htmlを提供するように設定されていたので、Webインスペクタは404について不満を言うことはありませんでした。あなたの設定についての詳細を知らなければ、これはおそらく犯人かもしれません。

126
Fredrik Frodlund

サーバとしてIISを実行し、.net 4/4.5では、Web.configにmime/file extensionの定義がない可能性があります。

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

私は同じ問題を抱えていました。, 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

それから私は壊れたフォントファイルを削除して、新しいフォントファイルを再適用しました、そして、とてもうまくいっています。

助けになれば幸いです。

14
rshah

やってみる

@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に変更します

4
Yu-Shing Shen

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

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

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
3
Abhijeet

GitHubで以下のアドレスに行き、FontAwesomeファイルをそれぞれダウンロードしてください。

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

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

FontAwesomeファイルのバイナリそのものではなく、HTMLページをダウンロードしたリンクを保存することに気付きました。

すべてのバイナリを入手したら、それは私にとって役に立ちました。

2
Robert Bolton

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

あなたの@font-face{}の後にあなたは$my-font: "OpenSans3.0 or whatever";を宣言しなければなりません

そしてこれはそれぞれのフォントフェースについてです。

:-)

2
Antoine

フォントが壊れていたのですが、問題なくロードされているようで、ChromeのSourcesの下でdevtoolsが表示されているようでしたが、バイト数が正しくなかったので、もう一度ダウンロードして解決しました。

2
LJT

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>
2
Skorunka František

次のようなエラーが表示されました。

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エラーメッセージが含まれていました）。

2
DJDaveMark

angular-cliとwebpackのユーザー私はいくつかの問題があると思われる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;
}

この記事は古くなっているかもしれませんが、これは私にとってうまくいった解決策です。

1
ip_x

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

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

乾杯！

0
Buitregool

EditorConfigオプション.woffを付けてSublime Textでwoff2および.end_of_line = lfファイルを開いて保存したときも同じ問題がありました。ファイルをSublimeに開かずにフォントフォルダにコピーしただけで問題は解決しました。

0
user3125779

私は同じ問題を抱えています。

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

@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）を選択すると、フォントバージョンにアクセスできます。

それが誰にでも役立つことを願っています！

0
Lefan

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

0
FRabbi

フォントの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ファイルからこのタグを削除する必要があるだけです。これを削除した後、あなたはあなたのフォントフォルダに行く必要があり、そしてあなたは表示されます： enter image description here

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

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

0
Prince Ahmed

他の答えがうまくいかなかった場合は試してください。

  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. ブラウザのキャッシュをクリアしてリロードする
0
Andrea Zangheri

他にもたくさんの方法を試し、たくさんの再インストールとチェックをした後、Chromeからデータを閲覧（キャッシュされた画像とファイル）をクリアしてページを更新することで問題を解決しました。

0
Andy Lorenz

私はIISでASP.NETを使用していますが、IISにMIMEタイプを追加する必要があることがわかりました： '.woff2'/'application/font-woff'

0
Jawid Hassim

次のようにフォーマットを@ font-faceに記述してください。

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