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.
css
asset-pipeline
ruby-on-rails-4.1
custom-font
Deepti Kakade
sumber
sumber
Jawaban:
Saya mendapat kesalahan yang sama persis, dan dalam kasus saya ternyata itu karena jalur yang salah untuk
@font-face
deklarasi. 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.sumber
CssRewriteUrlTransform
di BundleConfig.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>
sumber
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.
sumber
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
sumber
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.
sumber
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 */ }
sumber
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
.gitattributes
file Anda dan coba.*.eot binary *.ttf binary *.woff binary *.woff2 binary
sumber
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>
sumber
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).
sumber
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.
sumber
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.
:-)
sumber
Jika Anda menggunakan bootstrap, Perbarui
bootstrap.min.css
file bootstrap css ( ) dan file font. Saya memperbaiki masalah saya dengan solusi ini.sumber
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.
sumber
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.
sumber
Jika Anda menggunakan Chrome, coba tambahkan versi opentype (OTF) font Anda seperti yang ditunjukkan di bawah ini:
... url('icomoon.otf') format('opentype'), ...
Bersulang!
sumber
Saya menggunakan ASP.NET dengan IIS dan ternyata saya hanya perlu menambahkan tipe MIME ke IIS: '.woff2' / 'application / font-woff'
sumber
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.
sumber
Saya memiliki masalah yang sama ketika saya membuka dan menyimpan
.woff
dan.woff2
file melalui Sublime Text denganEditorConfig
opsiend_of_line = lf
. Saya baru saja menyalin file ke folder font tanpa membukanya ke Sublime dan masalah terpecahkan.sumber
Jika jawaban lain tidak berhasil, coba:
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
bersihkan cache server
sumber
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:
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.
sumber
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
sumber
code
Gagal mendekode font yang diunduh: localhost: 52963 / css /…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; }
sumber
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.
sumber
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";
sumber
Saya mengalami masalah yang sama, ini berhasil untuk saya https://github.com/webpack/webpack/issues/1468
sumber