Gagal mendekode font yang diunduh, kesalahan penguraian OTS: tag versi tidak valid + rel 4

Saya melakukan pra-kompilasi aset, dan menjalankan aplikasi dalam mode produksi. Setelah kompilasi ketika saya memuat halaman indeks saya, saya mendapat peringatan berikut di konsol 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

Masalahnya adalah tidak memuat ikon, bukan kotaknya yang ditampilkan .

kami menggunakan font khusus dan kodenya adalah:

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

Saya tidak tahu apa yang hilang dari akhir saya. Saya banyak mencari dan juga mencoba solusi tetapi tidak berhasil. Dalam mode pengembangan ini berfungsi dengan baik tetapi tidak tahu mengapa itu menunjukkan kotak dalam mode produksi.

Saya mendapat kesalahan yang sama persis, dan dalam kasus saya ternyata itu karena jalur yang salah untuk @font-facedeklarasi. Pemeriksa web tidak pernah mengeluhkan 404 karena server dev yang kami gunakan (server langsung) telah dikonfigurasi untuk menyajikan index.html default pada 404: s mana pun. Tanpa mengetahui detail apa pun tentang penyiapan Anda, ini mungkin penyebabnya.

Jika berjalan di IIS sebagai server dan .net 4 / 4.5, definisi mime / ekstensi file di Web.config mungkin hilang - seperti ini:

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

Saya mengalami masalah yang sama., 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

Jika Anda mendapatkan pesan kesalahan ini saat mencoba memasukkan fon Anda, berarti masalahnya ada pada .gitattributes " warning: CRLF will be replaced by LF"

Solusi untuk ini adalah menambahkan font apa pun yang bermasalah dengan Anda di .gitattributes

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

Kemudian saya menghapus file font yang rusak dan menerapkan kembali file font baru dan berfungsi dengan baik.

mencoba

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

dan ganti nama file Anda menjadi application.css.scss

Saya memiliki font yang rusak, meskipun tampaknya memuat tanpa masalah dan di bawah Sumber di Chrome devtools tampaknya ditampilkan, jumlah byte tidak benar, jadi saya mengunduh lagi dan menyelesaikannya.

Cukup sebutkan format pada @ font-face sebagai berikut:

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

Saya memiliki masalah yang sama dan itu karena git memperlakukan file-file ini sebagai teks. Jadi saat memeriksa file di agen build, biner tidak dipertahankan.

Tambahkan ini ke .gitattributesfile Anda dan coba.

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

Saat menggunakan angular-cli, inilah yang berhasil untuk saya:

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

Saya mendapatkan kesalahan berikut:

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

yang diperbaiki setelah mengunduh file mentah langsung dari:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Masalahnya adalah ada kesalahan proxy saat mengunduh file (itu berisi pesan kesalahan HTML).

Buka alamat di bawah ini di GitHub dan unduh setiap file FontAwesome.

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

... tetapi alih-alih mengeklik kanan dan menyimpan tautan sebagai, klik masing-masing file dan gunakan tombol 'Unduh' untuk menyimpannya.

Saya menemukan bahwa menyimpan tautan sebagai mengunduh halaman HTML dan bukan file biner FontAwesome itu sendiri.

Setelah saya memiliki semua binari, itu bekerja untuk saya.

Masalah saya adalah saya mendeklarasikan dua font, dan scss sepertinya mengharapkan Anda mendeklarasikan nama font.

setelah Anda, @font-face{} Anda harus menyatakan $my-font: "OpenSans3.0 or whatever";

dan ini untuk setiap font-face.

:-)

Jika Anda menggunakan bootstrap, Perbarui bootstrap.min.cssfile bootstrap css ( ) dan file font. Saya memperbaiki masalah saya dengan solusi ini.

Untuk pengguna angular-cli dan webpack, saya curiga ada masalah saat mengimpor font dalam file css, jadi berikan juga lokasi url yang dikodekan dengan tanda kutip tunggal sebagai berikut -

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

Posting ini mungkin sudah lama, tetapi ini adalah solusi yang berhasil untuk saya.

Saya pernah mengalami masalah yang sama.

Menambahkan versi font (mis. ?v=1.101) Ke URL font seharusnya berhasil;)

@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 */
}

Mengklik (klik kanan mouse) pada versi font TTF dan memilih "Get Info" (Mac OSX) "Properties" (Windows) di menu konteks seharusnya cukup untuk mengakses versi font.

Jika Anda menggunakan Chrome, coba tambahkan versi opentype (OTF) font Anda seperti yang ditunjukkan di bawah ini:

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

Bersulang!

Saya menggunakan ASP.NET dengan IIS dan ternyata saya hanya perlu menambahkan tipe MIME ke IIS: '.woff2' / 'application / font-woff'

Setelah mencoba banyak pendekatan lain, dan banyak penginstalan ulang dan pemeriksaan, saya baru saja memperbaiki masalah dengan menghapus data penjelajahan dari Chrome (gambar dan file yang disimpan dalam cache) dan kemudian menyegarkan halaman.

Saya memiliki masalah yang sama ketika saya membuka dan menyimpan .woffdan. woff2file melalui Sublime Text dengan EditorConfigopsi end_of_line = lf. Saya baru saja menyalin file ke folder font tanpa membukanya ke Sublime dan masalah terpecahkan.

Jika jawaban lain tidak berhasil, coba:

1. periksa file .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. bersihkan cache server

3. bersihkan cache browser & muat ulang

Periksa file css font Anda . (fontawesome.css / fontawesome.min.css) , Anda akan melihat seperti ini:

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

Anda akan melihat tag versi setelah nama ekstensi file font Anda . Suka:

-v = 4.6.3

Anda hanya perlu menghapus tag ini dari file css Anda. Setelah menghapus ini, Anda harus pergi ke folder font Anda, Dan Anda akan melihat:

Dan, dari file font ini, Anda hanya perlu menghapus tag versi -v = 4.6.3 dari nama file.

Kemudian, Masalahnya akan terselubung.

kalau-kalau ini relevan untuk seseorang. Saya mendapat kesalahan yang sama persis menggunakan ASP.NET dan C # di Visual studio. Ketika saya memulai aplikasi dari dalam studio visual, itu berhasil, tetapi saya mendapat masalah ini. Sementara itu, ternyata jalur ke proyek saya berisi karakter "#" (c: \ C # \ testapplication). Ini tampaknya membingungkan IIS Express (mungkin juga IIS) dan menyebabkan masalah ini. Saya kira "#" adalah karakter yang dipesan di suatu tempat di ASP.NET atau di bawahnya. Mengubah jalur membantu dan sekarang berfungsi seperti yang diharapkan.

Salam Christof

Yang membantu saya adalah saya mengubah urutan. .Eot diambil terlebih dahulu, tetapi kesalahan saya adalah saat memuat .eot. Jadi saya membuang .eot sebagai src pertama untuk woff2 dan kesalahannya hilang.

Jadi kodenya sekarang:

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

Dan adalah:

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

Saya sudah mengalami masalah ini dua kali dengan font ikon yang dihasilkan oleh icomoon. Dalam kedua kasus, salah satu ikon menggunakan "karakter spasi" (20)

Tampaknya menggunakan karakter spasi (kode 20) memicu masalah ini. Setelah saya mengubah kode menjadi selain 20 (spasi), font berfungsi dengan baik di Chrome.

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

Saya mengalami masalah yang sama, ini berhasil untuk saya https://github.com/webpack/webpack/issues/1468