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

144

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.

Deepti Kakade
sumber
2
Bisa jadi karena beberapa hal: pengkodean karakter mungkin salah atau font itu sendiri mungkin rusak. Bisakah Anda membuka font di Font Book atau yang serupa? Google cepat mengungkap bug di browser Chromium versi 45: code.google.com/p/chromium/issues/detail?id=545924
Craig
apakah Anda dapat menyelesaikan masalah tersebut?
kode
1
Dalam kasus saya, saya harus membersihkan cache cloudflare dan menunggu beberapa menit untuk membiarkan waktu memperbaiki masalah!
HoseinGhanbari
Saya memiliki masalah yang sama dan menemukan bahwa saya harus memiliki font woff2 sebelum woff untuk chrome.
jcubic

Jawaban:

142

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.

Fredrik Frodlund
sumber
1
Jika ini alasan pengalihan, Anda dapat memfilternya dengan ekstensi file RewriteRule! \. (Js | gif | css | jpg | otf | eot | png) $ / redirect [R = 301, L]
fearis
Dalam kasus saya, ASP.NET MVC bundling & minification pada dasarnya mengubah lokasi CSS tanpa mengubah jalur relatif di dalamnya. Harus menghapus file yang sudah dikecilkan dan menggunakan CssRewriteUrlTransformdi BundleConfig.
Sinjai
24

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>

Squareman88
sumber
18

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.

stacksonstacksonstacks
sumber
di mana file itu tinggal? akankah peramban tahu bahwa itu ada? Bagaimana?
Omar
@Omar File itu harus ada di direktori root Anda, dan tidak ada hubungannya dengan browser. Ini menjelaskan bagaimana git akan mengelola akhir baris dalam format file yang berbeda. Git dapat merusak beberapa tipe file dengan mencoba mengubah akhir baris.
elliottregan
5

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

Yu-Shing Shen
sumber
5

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.

LJT
sumber
Jika menggunakan woff2, saya mengalami masalah ini setelah menggunakan konverter online. Diperlukan untuk menggunakan konverter woff2 baris perintah (tersedia melalui homebrew)
rob-gordon
4

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

Oleksiy Stryzhak
sumber
3

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
Abhijeet
sumber
2

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>
Skorunka František
sumber
Akan lebih bagus jika Anda dapat mengatakan, untuk file mana Anda harus menambahkan ini?
Saiyaff Farouk
1
Edit web.config
Skorunka František
Saya tidak bisa mengajukan file web.config di proyek angular-cli. Menggunakan versi 1.3.0. Ada petunjuk?
Saiyaff Farouk
Web.config hanya digunakan ketika Anda menghosting aplikasi klien Anda di IIS (termasuk Layanan Web Azure).
Skorunka František
2

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

DJDaveMark
sumber
Saya tidak berpikir untuk memeriksa file itu sendiri .. pastikan juga untuk tidak mengunduh tautan ini secara langsung ("simpan tautan sebagai"), tetapi masukkan dan gunakan tombol "unduh".
omadawn
2

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.

Robert Bolton
sumber
1

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.

:-)

Antoine
sumber
Apakah Anda berbicara tentang font-family?
Nadav B
tidak dapat mengingat sekarang, maaf :-)
Antoine
1

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

FRabbi
sumber
1

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.

ip_x
sumber
1

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.

Lefan
sumber
0

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

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

Bersulang!

Buitregool
sumber
0

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

Jawid Hassim
sumber
0

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.

Andy Lorenz
sumber
0

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.

pengguna3125779
sumber
0

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
Andrea Zangheri
sumber
0

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: masukkan deskripsi gambar di sini

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

Kemudian, Masalahnya akan terselubung.

Pangeran Ahmed
sumber
0

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

x-dari Rezbach
sumber
punya masalah apa sebenarnya?
Nelles
codeGagal mendekode font yang diunduh: localhost: 52963 / css /…
x-dari Rezbach
0

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;
}
JosFabre
sumber
0

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.

David
sumber
-1
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";
Gampesh
sumber
7
Meskipun cuplikan kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa mendatang, dan orang-orang itu mungkin tidak tahu alasan saran kode Anda.
andreas