जेएसएफ 2 वेब फोंट ईओटी और एसवीजी माइम प्रकार IE8

Question

समाधान में काम नहीं कर रहे हैं समाधान: आईई 8 जेएसएफ के संसाधन लोडिंग की तरह प्रतीत नहीं होता है। मैं सिर्फ संबंधित पथ के लिए अपने स्रोत यूआरएल बदल गया है और फोंट अब लोड कर रहे हैं:

//this wasn't working for me, 404'ing in IE8 
src: url(#{resource['theme/fonts:mycustom_regular-roman-webfont.eot?#iefix']}) format('embedded-opentype'), 

//this works for me in IE8 
src: url(../resources/theme/fonts/mycustom_regular-roman-webfont.eot?#iefix) format('embedded-opentype'), 

मैं एक JSF2 एप्लिकेशन और IE8 में काम कर कस्टम वेब फोंट पाने के लिए कोशिश कर रहा हूँ। फोंट अन्य ब्राउज़रों में ठीक काम कर रहे हैं, मुझे लगता है कि मेरे माइम प्रकार के साथ ईओटी और एसवीजी के लिए समस्याएं हैं। आईई 8 में क्या हो रहा है मुझे सीएसएस में घोषित गैर-वेब फ़ॉन्ट फ़ॉलबैक मिल रहा है।

यहाँ मेरी web.xml है:

<!-- web fonts --> 
<mime-mapping> 
    <extension>eot</extension> 
    <mime-type>application/vnd.ms-fontobject</mime-type> 
</mime-mapping> 
<mime-mapping> 
    <extension>otf</extension> 
    <mime-type>font/opentype</mime-type> 
</mime-mapping>  
<mime-mapping> 
    <extension>ttf</extension> 
    <mime-type>application/x-font-ttf</mime-type> 
</mime-mapping>  
<mime-mapping> 
    <extension>woff</extension> 
    <mime-type>application/x-font-woff</mime-type> 
</mime-mapping> 
<mime-mapping> 
    <extension>svg</extension> 
    <mime-type>image/svg+xml</mime-type> 
</mime-mapping> 

और यहाँ क्या सांत्वना मुझे बता रहा है:

@font-face { 
    font-family: 'mycustom_regularregular'; 
    src: url(#{resource['theme/fonts:mycustom_regular-webfont.eot']}); 
    src: url(#{resource['theme/fonts:mycustom_regular-webfont.eot?#iefix']}) format('embedded-opentype'), 
     url(#{resource['theme/fonts:mycustom_regular-webfont.woff']}) format('woff'), 
     url(#{resource['theme/fonts:mycustom_regular-webfont.ttf']}) format('truetype'), 
     url(#{resource['theme/fonts:mycustom_regular-webfont.svg#omnes_ods_regularregular']}) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

:

[4/23/13 10:59:37:522 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:530 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:534 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:541 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:546 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:552 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.svg#omnes_ods_regularregular. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:557 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. 
[4/23/13 10:59:37:564 PDT] 0000001f context  W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. 

यहाँ कैसे मेरी फोंट सीएसएस फ़ाइल में घोषित कर रहे हैं

यहां स्टाइलशीट लोड किया गया है:

<h:outputStylesheet library="theme" name="stylesheet.css" target="head" /> 

किसी के पास कोई विचार है?

संपादित करें: curiousity मुझे के बेहतर तो मैं फ़िडलर 2 और ऊपर निकाल दिया IE8 में, मैं अपने वेब फोंट के लिए 404 हो रही है, लेकिन Chrome की नेटवर्क पैनल में मैं इसे फोंट ठीक लोड हो रहा है देख सकते हैं। कोई विचार क्यों IE8 404'ing है? यह भी दिलचस्प है कि फायरबग नेट पैनल में फोंट नहीं दिखाता है, लेकिन मैं देख सकता हूं कि वे डाउनलोड/लोड हो रहे हैं और साथ ही उन्हें फायरबग के माध्यम से चालू/बंद/बदल सकते हैं।

Answer 1

यहां समस्या यह है कि संसाधन हैंडलर एक्सटेंशन के साथ संसाधन की तलाश में है। आईट? #iefix जो मौजूद नहीं है और जिसका माइम-प्रकार अज्ञात है।

पॉल आयरिश द्वारा bulletproof-font-face-implementation-syntax/ में समझाया गया है? आईई के लिए 404 त्रुटियों से बचने के लिए एक फिक्स है।

तो अगर आप संसाधन एपीआई का उपयोग, स्रोत यूआरएल कुछ नीचे तरह दिखेगा: '?'

src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme"); 

जो अंत के बाद करने के लिए लाइब्रेरी नाम कहते हैं तो आपको उस '? #iefix' को जोड़ने की आवश्यकता नहीं होगी।

लेकिन मेरे पास विंडोज पीसी तक पहुंच नहीं है, इसलिए मैं अब इसे सत्यापित नहीं कर सकता। '? #iefix':

src: url("#{resource['theme:fonts/sample.eot']}?#iefix") format('embedded-opentype'); 

जो स्रोत में नीचे की तरह दिखाई देगा:

src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme?#iefix") format("embedded-opentype"); 

अन्य तरह से संसाधन एपीआई का उपयोग नहीं करने के लिए है लेकिन अगर आप अभी जोड़ने की जरूरत है आप कुछ इस तरह कर सकते हैं और उन्हें अपने सापेक्ष पथों से लोड करें जैसे आपने अपने समाधान अनुभाग में किया था।