फ़ायरफ़ॉक्स @ फ़ॉन्ट-फेस Fontawesome

Question

के साथ असफल हो रहा है मैं एक ओएसएस ऐप पर FontAwesome फ़ॉन्ट का उपयोग कर रहा हूं और मुझे फ़ायरफ़ॉक्स के फ़ॉन्ट सैनिटाइज़र से पहले प्रतीत नहीं होता है।

फाइलें सभी एक ही डोमेन की सेवा कर रही हैं, पथ सही हैं, और मैं FontAwesome से आधिकारिक सीएसएस का उपयोग कर रहा हूं जो फ़ायरफ़ॉक्स में उनकी साइट और स्थानीय दस्तावेज़ों के माध्यम से काम करता है।

तो मुझे कुछ आसान याद आना चाहिए।

लाइव यूआरएल: https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 

फायरफॉक्स के त्रुटियों के उदाहरण जब मैं देव के माध्यम से इसे ठीक करने की कोशिश कर रहे हैं। मैंने पूर्ण रूट पथ/स्थैतिक/फ़ॉन्ट और सीएसएस के सापेक्ष ../font/ करने की कोशिश की है और यह हमेशा मेरे लिए इन त्रुटियों के साथ विफल रहता है।

सब कुछ क्रोम और इस तरह काम करता है। ऐसा लगता है कि फ़ायरफ़ॉक्स मुझसे नफरत करता है। मैंने अन्य उत्तरों के माध्यम से खोज की है और मुझे फ़ॉन्ट चेहरे की पूरी श्रृंखला मिल गई है।

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

किसी भी संकेत के लिए धन्यवाद।

Answer 1

ए) क्या आप सुनिश्चित हैं कि आपके सर्वर में माइम प्रकार हैं जो ईट/वॉफ/टीटीएफ/एसवीजी के लिए सेट हैं ?? बी) ऐसा लगता है कि आप ईओटी के साथ किसी समस्या में भाग रहे हैं। जिसे इस तथ्य से समझाया जा सकता है कि फ़ायरफ़ॉक्स ईओटी का समर्थन नहीं करता है; यह डब्ल्यूओएफएफ और टीटीएफ का उपयोग करता है। सी) क्या आपने फ़ायरबग या फ़ायरफ़ॉक्स के देशी डेवलपर टूल का उपयोग करके डीबग करने का प्रयास किया है? डी) क्या आप अपना (प्रासंगिक) सीएसएस और एचटीएमएल पोस्ट कर सकते हैं?

Answer 2

धन्यवाद, यह दो भाग की समस्या थी।

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

चूंकि कोई उद्धरण नहीं था, इसलिए एफएफ src: url (...) बिट को पार्स करने में विफल रहा। चूंकि यह असफल रहा कि इसमें केवल src था: ..इसका मतलब आईई के लिए है और यह एफएफ में काम नहीं करता है।

उद्धरणों को डबल कोट्स में बदलने से सब कुछ खुश हो गया।

तो यह मेरी गलती है pyscss का उपयोग करके और यह पार्सर है जो फ़ायरफ़ॉक्स के लिए वाक्यविन्यास तोड़ने को समाप्त कर देता है।

धन्यवाद Matt इस पर मुझे देखने में मदद करने के लिए धन्यवाद।

Answer 3

मेरे मामले में यह अन्य स्थैतिक सामग्री (सीएसएस, png आदि) के रूप में ही * .war फ़ाइल में .eot/ .woff/.svg/ .ttf फ़ाइलें जगह रख दिया गया है पर्याप्त था। ऐसा लगता है कि एफएफ और आईई ने अन्य सर्वरों से फ़ॉन्ट फ़ाइलों को खतरनाक डाउनलोड किया।

Answer 4

मैं अपने ग्राहकों की वेबसाइटों में से एक पर एक ही समस्या में भाग गया।

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg'); 
} 

उपरोक्त फ़ायरफ़ॉक्स में काम किया। नीचे दिया गया एक काम नहीं किया।

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg); 
} 

स्वरूप विनिर्देशकों को प्रारूप ('svg') जैसे उद्धृत करने की आवश्यकता है।साइट्स द्वारा प्रदत्त सीएसएस स्टाइलशीट में से कुछ प्रारूप विनिर्देशों को उद्धृत नहीं करते हैं। मैंने एकल और डबल कोट्स दोनों के साथ पथ के साथ प्रयोग किया है और इससे कोई फर्क नहीं पड़ता। इसलिए मैं कह सकता हूं कि डबल/सिंगल उद्धृत पथों के बजाय यह निर्विवाद प्रारूप विनिर्देशों में समस्या है।

Answer 5

मुझे पता है कि यह देर से आ रहा है, लेकिन सबसे अच्छा विकल्प सीडीएन से फ़ॉन्ट-कमाल का उपयोग करना है। यदि आप ऐसा करते हैं तो आप शायद इस तरह की त्रुटि में भाग लेंगे।

आप एक बाहरी फ़ाइल से फ़ॉन्ट संदर्भित कर रहे हैं, तो बाहर लाइनों टिप्पणी:

@font-face { 
 
    font-family: FontAwesome; 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot"); 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg"); 
 
    font-weight: 400; 
 
    font-style: normal 
 
}

और सिर के बजाय

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
</head

में CDN से लिंक का उपयोग करें

और आप जाने के लिए अच्छा होगा।