डाउनलोड किए गए फ़ॉन्ट को डीकोड करने में विफल, ओटीएस पार्सिंग त्रुटि: अमान्य संस्करण टैग + रेल 4

136

मैं संपत्ति पूर्व-संकलन कर रहा हूं, और एप्लिकेशन को उत्पादन मोड में चला रहा हूं। संकलन के बाद जब मैं अपने इंडेक्स पेज को लोड करता हूं तो मुझे क्रोम कंसोल में फॉलोइंग की चेतावनी मिलती है:

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

मुझे नहीं पता कि मेरे अंत से क्या गायब है। मैंने बहुत खोज की और समाधान की भी कोशिश की, लेकिन कोई सफलता नहीं मिली। विकास मोड में इसका काम ठीक है लेकिन पता नहीं क्यों इसका उत्पादन मोड में वर्ग दिखा रहा है।

— दीप्ति काकड़े
स्रोत

2

यह कई चीजें हो सकती हैं: वर्ण एन्कोडिंग गलत हो सकता है या फ़ॉन्ट स्वयं दूषित हो सकता है। क्या आप फ़ॉन्ट बुक या इसी तरह का फ़ॉन्ट खोल सकते हैं? क्रोमियम ब्राउज़र संस्करण 45 में एक त्वरित Google बग दिखाता है

— क्रेग

क्या आप इस मुद्दे को हल करने में सक्षम थे?

— कोडर

1

मेरे मामले में, मुझे क्लाउडफ्लेयर कैश को शुद्ध करना है और कुछ मिनटों तक प्रतीक्षा करने के लिए समय को ठीक करना चाहिए!

— होसेनगंजरी

मुझे भी यही समस्या थी और मैंने पाया कि क्रोम के लिए woff से पहले woff2 फॉण्ट होना आवश्यक है।

— जेकुबिक

138

मुझे ठीक वही त्रुटि मिली, और मेरे मामले में यह @font-faceघोषणा के लिए एक गलत रास्ते के कारण निकला । वेब इंस्पेक्टर ने कभी भी 404 की शिकायत नहीं की क्योंकि हम जिस सर्वर (लाइव-सर्वर) का उपयोग कर रहे हैं, वह किसी भी 404: s पर डिफ़ॉल्ट index.html की सेवा के लिए कॉन्फ़िगर किया गया था। आपके सेटअप के बारे में कोई भी जानकारी जाने बिना, यह एक संभावित अपराधी हो सकता है।

— फ्रेड्रिक फ्रॉडलंड
स्रोत

1

यदि यह रीडायरेक्ट का कारण है तो आप इसे फ़ाइल एक्सटेंशन द्वारा फ़िल्टर कर सकते हैं RewriteRule! \! (Js | gs | css | jpg | otf | eot | png) $ / redirect [R = 301, L]

— 14

मेरे मामले में, ASP.NET MVC बंडलिंग और मिनिफिकेशन ने अनिवार्य रूप से सीएसएस के स्थान को बदल दिया, जिससे उसमें सापेक्ष पथ नहीं बदले। पहले से तैयार की गई फ़ाइल को हटाना और CssRewriteUrlTransformबंडलकॉन्फिग में उपयोग करना था।

— सिंजई

22

यदि IIS पर सर्वर और .net 4 / 4.5 के रूप में चल रहा है तो यह Web.config में माइम / फाइल एक्सटेंशन परिभाषाओं को याद कर सकता है - जैसे:

<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
स्रोत

16

मैं एक ही मुद्दा रहा था।, 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

यदि आपको अपना फ़ॉन्ट करने का प्रयास करते समय यह त्रुटि संदेश मिला है तो यह .itattributes " warning: CRLF will be replaced by LF" के साथ एक समस्या है

इसके लिए समाधान जो भी हो आप फ़ॉन्ट को .gitattributes में समस्या के साथ जोड़ रहे हैं

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

फिर मैंने भ्रष्ट फ़ॉन्ट फ़ाइलों को हटा दिया और नई फ़ॉन्ट फ़ाइलों को फिर से लागू किया और महान काम कर रहा है।

— stacksonstacksonstacks
स्रोत

वह फ़ाइल कहाँ रहती है? क्या ब्राउज़र को भी पता होगा कि यह मौजूद है? कैसे?

— उमर

@ उमर फ़ाइल आपकी रूट डायरेक्टरी में होनी चाहिए, और ब्राउजर से इसका कोई लेना-देना नहीं है। यह बताता है कि कैसे git अलग फ़ाइल स्वरूपों में लाइन अंत का प्रबंधन करने जा रहा है। Git लाइन एंडिंग को बदलने की कोशिश करके कुछ फाइलपेट को दूषित कर सकता है।

— दीर्घवृत्त

5

प्रयत्न

@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

मेरे पास एक दूषित फ़ॉन्ट था, हालांकि यह बिना किसी समस्या के लोड हो रहा था और क्रोम के तहत devtools में प्रदर्शित करने के लिए दिखाई दिया, बाइट गिनती सही नहीं थी, इसलिए मैंने फिर से डाउनलोड किया और इसे हल किया।

— LJT
स्रोत

यदि woff2 का उपयोग करते हैं, तो मुझे ऑनलाइन कन्वर्टर्स का उपयोग करने के बाद यह समस्या थी। कमांड लाइन woff2 कनवर्टर (होमब्रे के माध्यम से उपलब्ध) का उपयोग करने की आवश्यकता है

— रोब-गॉर्डन

4

निम्नलिखित के रूप में @ फॉंट-फेस पर बस स्टेट फॉर्मेट:

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

स्निपेट का विस्तार करें

— ओलेक्सी स्ट्रीज़क
स्रोत

3

मेरे पास एक ही मुद्दा था और इसका कारण यह था कि इन फ़ाइलों को पाठ के रूप में माना जाता है। इसलिए बिल्ड एजेंटों में फ़ाइलों की जांच करते समय, बाइनरी को बनाए नहीं रखा गया था।

इसे अपनी .gitattributesफ़ाइल में जोड़ें और प्रयास करें।

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

— अभिजीत
स्रोत

2

उपयोग करते समय 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>

— स्कोरुनका फ्रांटिसेक
स्रोत

यह बहुत अच्छा होगा यदि आप कह सकते हैं कि आपको किस फ़ाइल के लिए ये जोड़ना है?

— सैयाफ फ़ारूक

1

वेब को संपादित करें

— ।config

मैं कोणीय-क्ली परियोजना में एक web.config फाइल नहीं कर सका। संस्करण 1.3.0 का उपयोग करना। कोई सुराग?

— सईयाफ़ फ़ारूक

Web.config का उपयोग केवल तब किया जाता है जब आप अपने क्लाइंट ऐप को IIS (incl। Azure Web Services) पर होस्ट करते हैं।

— स्कोरुनका फ्रांटिसेक

2

मुझे निम्नलिखित त्रुटियां मिल रही थीं:

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- अनियमित.woff2

समस्या यह थी कि फ़ाइल डाउनलोड करते समय एक प्रॉक्सी त्रुटि थी (इसमें HTML त्रुटि संदेश शामिल था)।

— DJDaveMark
स्रोत

मैंने फ़ाइल को स्वयं चेक करने के लिए नहीं सोचा था .. यह भी सुनिश्चित करें कि यह लिंक सीधे ("लिंक के रूप में सहेजें") डाउनलोड न करें, लेकिन इसे दर्ज करें और "डाउनलोड" बटन का उपयोग करें।

— ओमडॉन

2

GitHub पर नीचे दिए गए पते पर जाएं और प्रत्येक FontAwesome फाइलों को डाउनलोड करें।

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

... लेकिन लिंक को राइट-क्लिक करने और सहेजने के बजाय, प्रत्येक फ़ाइलों पर क्लिक करें और उन्हें बचाने के लिए 'डाउनलोड' बटन का उपयोग करें।

मैंने पाया कि लिंक को सहेजना एक HTML पेज के रूप में डाउनलोड किया गया था न कि FontAwesome फाइल बाइनरी।

एक बार मेरे पास सभी बायनेरिज़ थे जो मेरे लिए काम करते थे।

— रॉबर्ट बोल्टन
स्रोत

1

मेरा मुद्दा यह था कि मैं दो फोंट की घोषणा कर रहा था, और स्कैस को उम्मीद है कि आप फॉन्ट के नाम की घोषणा करते हैं।

आपके बाद @font-face{} आपको घोषित करना होगा $my-font: "OpenSans3.0 or whatever";

और प्रत्येक फ़ॉन्ट-चेहरे के लिए।

:-)

— एंटोनी
स्रोत

क्या आप फ़ॉन्ट-परिवार के बारे में बात कर रहे हैं?

— नदव बी

अब याद नहीं कर सकते, क्षमा करें :-)

— Antoine

1

के लिए कोणीय CLI और webpack उपयोगकर्ताओं मैं संदिग्ध कुछ मुद्दा है कि वहाँ है, जबकि, सीएसएस फ़ाइल में फोंट का आयात तो भी यूआरएल स्थान निम्नलिखित के रूप में एकल उद्धरण के साथ इनकोडिंग प्रदान करें -

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

यह पद पुराना हो सकता है, लेकिन यह वह समाधान है जो मेरे लिए काम करता है।

— ip_x
स्रोत

1

मैं एक ही मुद्दा था।

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

फ़ॉन्ट के टीटीएफ संस्करण पर क्लिक करना (दायाँ माउस क्लिक) और "गेट इन्फो" (मैक ओएसएक्स) "गुण" (विंडोज़) को संदर्भ मेनू में चुनना फ़ॉन्ट संस्करण तक पहुँचने के लिए पर्याप्त होना चाहिए।

— Lefan
स्रोत

0

यदि आप Chrome का उपयोग कर रहे हैं, तो नीचे दिखाए गए अनुसार अपने फ़ॉन्ट का एक opentype (OTF) संस्करण जोड़ने का प्रयास करें:

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

चीयर्स!

— Buitregool
स्रोत

0

यदि आप बूटस्ट्रैप का उपयोग करते हैं तो बूटस्ट्रैप सीएसएस ( bootstrap.min.css) फ़ाइल और फोंट फ़ाइलों को अपडेट करें। मैंने इस समाधान के साथ अपनी समस्या को ठीक किया।

— FRabbi
स्रोत

0

मैं IIS के साथ ASP.NET का उपयोग कर रहा हूं और यह पता चला है कि मुझे MIME-प्रकार को IIS में जोड़ने की जरूरत है: '.woff2' / 'application / font-woff'

— जाविद हासिम
स्रोत

0

बहुत सारे अन्य तरीकों, और बहुत सारे री-इंस्टॉल और चेक की कोशिश करने के बाद, मैंने अभी क्रोम (कैश्ड इमेज और फाइल्स) से ब्राउजिंग डेटा को क्लीयर करके और फिर पेज को रिफ्रेश करके समस्या को ठीक किया है।

— एंडी लोरेंज
स्रोत

0

जब मैंने खोला और बचाया .woffऔर मुझे एक ही समस्या थी । विकल्प के woff2साथ उदात्त पाठ के माध्यम से फ़ाइलें । मैंने केवल फाइल को फ़ॉन्ट फ़ोल्डर में कॉपी किया, उन्हें सबलाइम में खोले बिना और समस्या हल हो गई।EditorConfigend_of_line = lf

— user3125779
स्रोत

0

यदि अन्य उत्तर काम नहीं करते हैं:

चेक .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
स्पष्ट सर्वर कैश
ब्राउज़र कैश और पुनः लोड करें

— एंड्रिया जंघेरी
स्रोत

0

अपने फ़ॉन्ट की सीएसएस फ़ाइल की जाँच करें । (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 को निकालने की आवश्यकता है ।

फिर, समस्या का समाधान किया जाएगा।

— प्रिंस अहमद
स्रोत

0

बस किसी के लिए यह प्रासंगिक है। मुझे विज़ुअल स्टूडियो में ASP.NET और C # का उपयोग करके सटीक त्रुटि मिली। जब मैंने दृश्य स्टूडियो के भीतर से ऐप शुरू किया तो यह काम कर गया, लेकिन मुझे यह मुद्दा मिल गया। इस बीच, यह पता चला कि, मेरे प्रोजेक्ट के पथ में "#" (c: \ C # \ testapplication) वर्ण था। यह IIS एक्सप्रेस (शायद IIS) भी भ्रमित करता है और इस समस्या का कारण बनता है। मुझे लगता है कि "#" ASP.NET या उससे नीचे का एक आरक्षित वर्ण है। रास्ता बदलने से मदद मिली और अब यह उम्मीद के मुताबिक काम करता है।

सादर क्रिस्टोफ़

— रेज़बैक की एक्स
स्रोत

वास्तव में क्या मुद्दा मिला ?

— नेल्स

codeडाउनलोड किए गए फ़ॉन्ट को डीकोड करने में विफल: लोकलहोस्ट: 52963 / सीएसएस /…

— रेजबाक का एक्स-ऑफ

0

जिस चीज ने मेरी मदद की, मैंने वह क्रम बदल दिया। .Eot को पहले लोड किया जाता है, लेकिन मेरी त्रुटि। लोड करने पर थी। इसलिए मैंने woff2 के लिए पहले src के रूप में। Dot की और त्रुटि चली गई।

अब कोड है:

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

— JosFabre
स्रोत

-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
स्रोत

7

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— andreas

-2

मैं एक ही मुद्दा रहा था, यह मेरे लिए काम किया https://github.com/webpack/webpack/issues/1468

— andreiM
स्रोत

15

केवल लिंक पोस्ट न करें ... समाधान के साथ उत्तर पोस्ट करें क्योंकि लिंक भविष्य में नीचे जा सकते हैं।

— अर्नव एम।