7

解決策: IE8 は JSF のリソースのロードを好まないようです。src url を相対パスに変更したところ、フォントが読み込まれています。

//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 で動作するカスタム Web フォントを取得しようとしています。フォントは他のブラウザでは正常に動作していますが、eot と svg の MIME タイプに問題があるようです。IE8 で何が起こっているかというと、CSS で宣言された非 Web フォントのフォールバックを取得しています。

これが私の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>

そして、コンソールが私に言っていることは次のとおりです。

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

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

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

誰にもアイデアはありますか？

編集: 好奇心が勝ったので、Fiddler 2 を起動しました。IE8 では、Web フォントに対して 404 を取得していますが、Chrome のネットワーク パネルでは、フォントが正常に読み込まれていることがわかります。IE8 が 404 を実行している理由がわかりましたか? また興味深いのは、Firebug がネット パネルにフォントを表示しないことですが、Firebug を介してフォントをオン/オフ/変更するだけでなく、フォントがダウンロード/ロードされていることを視覚的に確認できます。

4

1 に答える 1

8

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

ポール・アイリッシュがbulletproof-font-face-implementation-syntax/で説明したように、 ? 404 エラーを回避するための IE の修正です。

したがって、Resource API を使用する場合、ソース URL は次のようになります。

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

最後にライブラリ名を追加し、その後に「?」を追加します。その「?#iefix」を追加する必要はありません。

しかし、私は Windows PC にアクセスできないので、今は確認できません。それでも '?#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");

もう 1 つの方法は、Resource API を使用せず、ソリューション セクションで行ったように相対パスでロードすることです。

于 2013-04-24T00:47:55.940 に答える