JSF2 Webフォントeotとsvg MIMEタイプがIE8で動作しない

Question

解決法： IE8はJSFのリソース読み込みが好きではないようです。私は、相対パスに私のsrc URLを変更し、フォントは現在ロードされている：私はJSF2アプリとIE8での作業カスタムウェブフォントを取得しようとしている

//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'), 

。他のブラウザではフォントが正常に動作していますが、私はeotとsvgのMIMEタイプに問題があるようです。 IE8で起こっていることは、CSSで宣言された非ウェブフォントのフォールバックを取得していることです。ここで

は私のweb.xmlです：

[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. 

は、ここに私のフォントをCSSファイルで宣言されている方法は次のとおりです：

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

<!-- 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> 

そして、ここでは、コンソールが私に言っているものです

スタイルシートの読み込み方法は次のとおりです。

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

誰もが考えている？

編集：私はIE8でフィドラー2とを解雇好奇心が私のより良い、私は私のウェブフォントのために404エラーを取得していましたが、Chromeのネットワークパネルで、私はそれがうまくフォントをロード見ることができます。なぜIE8が404'ingなのか？ FirebugはNetパネルのフォントを表示しないのも興味深いですが、ダウンロード/ロード中であることを視覚的に見ることができ、Firebugでオン/オフ/変更することもできます。

Answer 1

ここでの問題は、リソースハンドラが存在しないMIMEタイプが不明な拡張子.eot？#iefixを持つリソースを探していることです。

ポールアイリッシュによって説明されているように、bulletproof-font-face-implementation-syntax/？ IEの404エラーを回避するための修正プログラムです。あなたはリソースAPIを使用している場合

ので、ソースのURLは以下のようなものになります。「？」

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

続い最後にライブラリ名を追加しますだから、 '？#fix'を追加する必要はありません。

しかし、私はWindows PCにアクセスできないので、今は確認できません。ソースには以下のように表示されます

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"); 

その他の方法は、リソースのAPIを使用しないことですあなたはまだ「？#iefix」を追加する必要がある場合しかし、あなたはこのような何かを行うことができますソリューションセクションで行ったような相対パスでロードします。