डाउनलोड किए गए फ़ॉन्ट को डीकोड करने में विफल


149

यह एक त्रुटि है जो मुझे क्रोम में मिल रही है और दुर्भाग्य से इसकी खोज ने मुझे बहुत अधिक परिणाम नहीं दिए हैं। फ़ॉन्ट अपने आप सही दिखाई दे रहा है। हालाँकि मुझे अभी भी यह त्रुटि / चेतावनी मिलती है। विशेष रूप से, यह पूरी चेतावनी है:

"डाउनलोड किए गए फ़ॉन्ट को डीकोड करने में विफल: http: // localhost: 8000 / ऐप / फोंट / लाटो / "

मेरी सीएसएस ये हैं:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

मुझे समझ में नहीं आता है। फ़ॉन्ट सही ढंग से लागू किया गया है, लेकिन चेतावनी हमेशा रहती है। उपयोग करने की कोशिश करने Sans-Serifसे फ़ॉन्ट सामान्य ब्राउज़र फ़ॉन्ट पर वापस आ जाता है, इसलिए यह हो सकता है, लेकिन मुझे यकीन नहीं है, और खोज के बाद भी मुझे कुछ भी नहीं मिला है। धन्यवाद!

संपादित करें

सभी फ़ॉन्ट फ़ाइलें हैं, सभी एक ही परिवार से हैं। मैं उन सभी को लोड करने की कोशिश कर रहा हूं। फ़ॉन्ट फ़ाइलें हैं .ttf। मैं उन्हें एक स्थानीय फ़ोल्डर से लोड हो रहा है कर रहा हूँ, और विभिन्न फ़ॉन्ट फ़ाइलों की तरह देखते हैं, Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfआदि


2
URL में अनुगामी स्लैश क्यों है? क्या आप सभी फाइलों को एक निर्देशिका से लोड करने की कोशिश कर रहे हैं या यह वास्तव में एक फ़ॉन्ट फ़ाइल के लिए पुनर्निर्देशन है?
अल्वारो गोंजालेज

@ ThanklvaroG.Vicario हाय, आपके समय के लिए धन्यवाद। मैंने इसे स्पष्ट करने के लिए प्रश्न संपादित किया।
लुइस फरेरा

जवाबों:


101

सीएसएस नियम में आपको फ़ाइल का विस्तार जोड़ना होगा। संभव सबसे गहरे समर्थन के साथ यह उदाहरण:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

संपादित करें:

"डाउनलोड किए गए फ़ॉन्ट को डिकोड करने में विफल" का अर्थ है कि फ़ॉन्ट भ्रष्ट है, या अधूरा है (लापता मैट्रिक्स, आवश्यक तालिकाओं, नामकरण रिकॉर्ड, एक मिलियन संभव चीजें)।

कभी-कभी यह समस्या फ़ॉन्ट के कारण होती है। Google फ़ॉन्ट आपको आवश्यक सही फ़ॉन्ट प्रदान करता है, लेकिन यदि फ़ॉन्ट चेहरा आवश्यक है, तो मैं सभी फ़ॉन्ट प्रारूप उत्पन्न करने के लिए ट्रांसफॉंटर का उपयोग करता हूं ।

कभी-कभी एफ़टीपी क्लाइंट होता है जो फ़ाइल को भ्रष्ट करता है (इस मामले में नहीं क्योंकि स्थानीय पीसी पर है)। बाइनरी में फाइल ट्रांसफर करना सुनिश्चित करें न कि ASCII में।


मैंने इसे स्पष्ट करने के लिए अपने प्रश्न का संपादन किया। मुझे यकीन नहीं है कि यह आपके द्वारा पोस्ट की गई चीजों में से कुछ भी बदल देता है। गंदगी के लिए खेद है और आपके समय के लिए धन्यवाद।
लुइस फरेरा

1
आपको जरूरी @ फेस का उपयोग करना है? मुझे पता है कि Lato गूगल फोंस पर उपलब्ध है। किसी भी तरह आप यह कोशिश कर सकते हैं: font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof');हर प्रकार के फ़ॉन्ट, नियमित, बोल्ड आदि के लिए यह कोड ...
जर्मनो प्लीबानी

1
मैंने Google फोंट विकल्प का उपयोग करके समाप्त किया और यह अच्छी तरह से काम करता है। धन्यवाद। मैंने आपका उत्तर स्वीकार कर लिया।
लुइसे फरेरा

9
यह प्रश्न 'डाउनलोड किए गए फ़ॉन्ट को डिकोड करने में विफल' लेबल है। उत्तर विशिष्ट स्थिति है, और वास्तव में यह नहीं बताता है कि त्रुटि का क्या मतलब है।
15:

24

मैंने विज़ुअल स्टूडियो में एक समान समस्या का अनुभव किया, जो कि url()प्रश्न में फ़ॉन्ट के गलत रास्ते के कारण हो रहा था ।

मैंने इस त्रुटि को बदलना बंद कर दिया (उदाहरण के लिए):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

इसके लिए:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

1
मेरे लिए ./ या ../ काम नहीं किया लेकिन / को पूरी तरह से हटाकर काम /assets...करने के लिए assets...बहुत बहुत धन्यवाद!
शेरिफ मार्जुक

21

प्रारूप (from woff ’) से प्रारूप में बदलें (w font-woff’) इस समस्या को हल करने में अभी मेरी मदद करें।

जर्मनो प्लीबानी के उत्तर से यहां थोड़ा बदलाव करें

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

कृपया जांचें कि क्या आपके ब्राउज़र स्रोत इसे खोल सकते हैं और प्रकार क्या है


7
font-woff प्रारूप गलत है, इसे "woff" पढ़ना चाहिए। और इसके साथ, क्रोम woff फ़ॉन्ट को अज्ञात प्रारूप मानता है और अगले सर्वोत्तम प्रारूप पर छोड़ता है (शायद यहां woff2 का ttf)
आर्थर

बहुत बहुत धन्यवाद, इस समाधान के साथ मैं अन्य प्रारूपों (ttf, woff2, ...) के साथ समस्या को हल कर सकता हूं।
सुदूर

5
दुर्भाग्य से यह उत्तर गलत है। यह स्पष्ट नहीं हो सकता है कि @Aththur क्या कह रहा है, लेकिन यदि आप फ़ॉन्ट प्रारूप का नाम बदलते हैं तो ब्राउज़र शाब्दिक रूप से फ़ॉन्ट को अनदेखा कर देगा, क्योंकि यह फ़ॉन्ट के रूप में पंजीकृत नहीं होता है। क्रोम के निरीक्षण उपकरण (F12) में, एप्लिकेशन टैब पर जाएं फिर नीचे फ़्रेम> टॉप> फ़ॉन्ट्स पर जाएं। इस समाधान का उपयोग करने का प्रयास करें, और आप देखेंगे कि फोंट हटा दिए जाएंगे। मैं शायद ही कभी एसओ पर डाउनवोट का उपयोग करता हूं, लेकिन इस मामले में उत्तर वास्तव में पाठकों को बदतर बना देता है, क्योंकि उन्हें लगता है कि उन्होंने समस्या को हल कर दिया है, लेकिन केवल इसे छलावा दिया है।
एंड्रे सी। एंडरसन

एक नेक्सज परियोजना में woff फ़ाइलें आयात करने से मेरी समस्या हल हो गई! आपका बहुत बहुत धन्यवाद!
थान-कुई गुयेन

जैसा कि @ AndréC.Andersen कहते हैं कि यह केवल PROBLEM और DESN'T FIX IT को ही नहीं दिखाता है ।
जॉनके

12

सुनिश्चित करें कि आपका सर्वर सही माइम / प्रकार के साथ फ़ॉन्ट फ़ाइलें भेज रहा है ।

मुझे हाल ही में nginx का उपयोग करने में एक ही समस्या है क्योंकि कुछ फ़ॉन्ट माइम प्रकार इसकी वेनिला /etc/nginx/mime.typesफ़ाइल से गायब हैं ।

मैंने उस स्थान पर लापता माइम प्रकारों को जोड़ने के मुद्दे को तय किया जहां मुझे उनकी आवश्यकता थी:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

आप यह भी देख सकते हैं कि mime.types को nginx में विस्तारित करने के लिए: डिफ़ॉल्ट nginx mime.typ फ़ाइल फ़ाइलों का विस्तार करना


12

मुझे type="text/css"अपने लिंक-टैग में जोड़ना था । मैंने इसे इसमें से बदल दिया:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

सेवा:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

मैं इसे बदलने के बाद त्रुटि गायब हो गया।


धन्यवाद, यह काम करता है। इसलिए अगर कोई भी Google से फोंट लोड कर रहा है तो बस इसे जोड़ें type="text/css"और ब्राउज़र कंसोल में चेतावनी संदेश 'हार्ड' रिफ्रेश होने के बाद चला गया है
lewis4u


6

मेरे लिए, यह त्रुटि तब आई थी जब मैंने https का उपयोग करके एक Google फ़ॉन्ट का संदर्भ दिया था। जब मैंने http पर स्विच किया, तो त्रुटि दूर हो गई। (और हाँ, मैंने यह पुष्टि करने के लिए कई बार कोशिश की कि इसका कारण था)

इसलिए मैं बदल गया:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

सेवा:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

3
मैं भी गूगल फोंट के साथ एक ही त्रुटि हो रही थी, जब मैंने हार्ड पुनः लोड किया तो समस्या स्वतः हल हो गई!
मौलिक गंगानी

1
-1, क्षमा करें। इसके लिए ड्रॉप सपोर्ट का उपयोग नहीं करना चाहिए https! यह आपकी साइट को असुरक्षित बनाता है । @MaulikGangani का अवलोकन कार्य करता है! इसे अपने उत्तर में एकीकृत करने पर विचार करें
सिप्रियन टोमोयाग

4

कभी-कभी यह समस्या तब होती है जब आप गलत एफ़टीपी पद्धति का उपयोग करके फोंट अपलोड / डाउनलोड करते हैं। फ़ॉन्‍ट बाइनरी विधि का उपयोग करके एफ़टीपी-एड होना चाहिए, एएससीआईआई नहीं। (आपके मनोदशा के आधार पर, यह काउंटरिनिटिव, लोल महसूस कर सकता है)। यदि आप ASCII विधि का उपयोग करके फ़ॉन्ट फ़ाइलों को ftp करते हैं, तो आप यह त्रुटि संदेश प्राप्त कर सकते हैं। यदि आप एक 'ऑटो' विधि के साथ अपनी फ़ाइलों को ftp करते हैं, और आपको यह त्रुटि संदेश मिलता है, तो FTP विधि को बाइनरी विधि का प्रयास करें।


3

मैं फ़ॉन्ट भयानक v4.4 के साथ एक ही मुद्दा था और मैं इसे woff2 प्रारूप को हटाकर तय किया। मुझे केवल क्रोम में चेतावनी मिल रही थी।

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

1
हाँ! मैंने प्रारूप ('woff2') को हटा दिया और इसने चेतावनी को हटा दिया। धन्यवाद।
duyn9uyen

3

मेरे मामले में यह .htaccess में गलत पथ फ़ाइल के कारण हुआ था। कृपया अपने फ़ाइल पथ की शुद्धता की जांच करें।


2

मेरे लिए, फॉन्ट फ़ाइलों को अपलोड करने से पहले एफ़टीपी को बाइनरी मोड में डालने की भूल कर रहा था।

संपादित करें

आप छवियों जैसे अन्य प्रकार के बाइनरी डेटा अपलोड करके इसके लिए परीक्षण कर सकते हैं। यदि वे भी प्रदर्शित करने में विफल रहते हैं, तो यह आपका मुद्दा हो सकता है।


क्या इसके लिए कोई दूसरा शब्द है? मुझे लगता है कि मेरे एफ़टीपी ग्राहकों में से कोई भी विकल्प नहीं मिल रहा है।
सरकोमा

मैं केवल निक्स कमांड लाइन ब्राउज़रों से BIN और ASCII शब्द जानता हूं। मुझे लगता है कि कई आधुनिक एफ़टीपी ग्राहक जानते होंगे कि कैसे फाइलें बाइनरी हैं और जो नहीं हैं, इसलिए शायद यह आपकी समस्या नहीं है। यदि आप यह परीक्षण करना चाहते हैं कि क्या आपका एफ़टीपी क्लाइंट बाइनरी मोड में भेज रहा है, तो बाइनरी डेटा, जैसे .jpg, को स्थानांतरित करने के लिए एफ़टीपी का उपयोग करें, तो इसे देखने का प्रयास करें। यदि इसे ASCII मोड में भेजा गया है, तो यह प्रदर्शित नहीं होगा। (देखें jscape.com/blog/… )
रॉबर्ट

आह, मैं देख रहा हूँ, स्पष्टीकरण के लिए धन्यवाद। मेरे द्वारा अपलोड की जा रही सभी छवियां ठीक हैं, मुझे अंततः फाइलज़िला में बाइनरी मोड मिला, इससे मुझे दुर्भाग्य नहीं हुआ। मुझे बाइनरी के लिए PHP स्टॉर्म में कोई विकल्प नहीं मिला, लेकिन जैसा कि मैंने कहा कि चित्र ठीक हैं, इसलिए मैं अनुमान लगा रहा हूं कि यह वह समस्या नहीं है जो मैं कर रहा हूं।
सारकोमा

1

मुझे भी यही समस्या थी लेकिन मैंने सभी .ttf फ़ाइलों के लिए प्रतिक्रिया हेडर में 'कंटेंट-टाइप': 'एप्लीकेशन / x-font-ttf' जोड़कर हल किया है।


1
यह कैसे करना है ?
बैम गलत

1

मेरे मामले में, यह एक SVN पैच फ़ाइल बनाने के कारण था जो फ़ॉन्ट फ़ाइलों के अतिरिक्त शामिल था। इस तरह:

  1. स्थानीय फ़ाइल सिस्टम से फ़ॉन्ट फ़ाइलों को तोड़फोड़ ट्रंक में जोड़ें
  2. ट्रंक उम्मीद के मुताबिक काम करता है
  3. फ़ॉन्ट फ़ाइलों को शामिल करने के लिए, ट्रंक परिवर्तनों का SVN पैच बनाएं
  4. पैच को दूसरी शाखा पर लगाएँ
  5. फ़ॉन्ट फ़ाइलों को तोड़फोड़ शाखा में जोड़ा जाता है (और प्रतिबद्ध किया जा सकता है), लेकिन ओपी में त्रुटि उत्पन्न करने वाले, भ्रष्ट हैं।

इसका समाधान यह था कि फ़ॉन्ट फ़ाइलों को सीधे मेरी स्थानीय फ़ाइल प्रणाली से शाखा में अपलोड किया जाए। मुझे लगता है कि ऐसा इसलिए हुआ क्योंकि SVN पैच फाइलें सब कुछ ASCII फॉर्मेट में बदल देती हैं, और जरूरी नहीं कि फॉन्ट फाइल्स के लिए बाइनरी को बरकरार रखा जाए। लेकिन यह केवल एक अनुमान है।


1

मेरे मामले में - गैट्सबाय के साथ रिएक्ट का उपयोग करते हुए - इस मुद्दे को मेरे सभी रास्तों की दोहरी जांच के साथ हल किया गया था। मैं सैस के साथ रिएक्ट / गैट्सबाइ का उपयोग कर रहा था और गैट्सबी स्रोत फाइलें कंपाइल फाइल की तुलना में एक अलग स्थान में फोंट की तलाश कर रहे थे। एक बार जब मैंने फ़ाइलों को प्रत्येक पथ में दोहराया तो यह समस्या दूर हो गई।


1

मेरे मामले में जब कोई टेम्प्लेट डाउनलोड करता है तो फॉन्ट फाइलें सिर्फ खाली फाइल होती थीं। शायद डाउनलोड के साथ एक मुद्दा। क्रोम ने इसके बारे में सामान्य त्रुटि दी। मैंने पहले सोचा था कि इसे हल woffकरने से बदलने का उपाय font-woffहै, लेकिन इसने क्रोम को केवल फोंट को अनदेखा कर दिया। मेरा समाधान एक-एक करके फोंट ढूंढ रहा था और उन्हें डाउनलोड / बदल रहा था।


0

यदि आप एक्सप्रेस का उपयोग कर रहे हैं, तो आपको कुछ जोड़कर स्थिर सामग्री की सेवा की अनुमति देने की आवश्यकता है: var server = express (); server.use (express.static ( './ सार्वजनिक')); // जहां सार्वजनिक ऐप रूट फ़ोल्डर है, उसमें किसी भी स्तर पर, यानी सार्वजनिक / फोंट या सार्वजनिक / डिस्ट / फोंट के साथ फ़ॉन्ट ... // यदि आप कनेक्ट का उपयोग कर रहे हैं, तो इसी तरह के कॉन्फ़िगरेशन के लिए Google।


0

मैं .Net फ्रेमवर्क 4.5 / IIS 7 का उपयोग करता हूं

इसे ठीक करने के लिए मैंने फ़ॉन्ट फ़ाइल के साथ फ़ोल्डर में फ़ाइल Web.config डाल दिया।

Web.config की सामग्री:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>


0

यदि यह सर्वर (लोकलहोस्ट में नहीं) पर है, तो फोंट को मैन्युअल रूप से अपलोड करने का प्रयास करें, क्योंकि कभी-कभी एफ़टीपी क्लाइंट (उदाहरण के लिए, फ़ाइलज़िला) फाइलों को दूषित कर देता है और यह समस्या का कारण बन सकता है। मेरे लिए, मैंने Cpanel इंटरफ़ेस का उपयोग करके मैन्युअल रूप से अपलोड किया है।


0

मेरा मामला समान था लेकिन फ़ॉन्ट दूषित था (और डिकोड करना असंभव था)। यह मावेन में विन्यास के कारण हुआ था। फॉन्ट एक्सटेंशन के लिए नॉनफिल्डफाइल एफएक्सटेंशन को जोड़ने से maven-resources-pluginमुझे मदद मिली:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.