JSF2网络字体eot和svg mime类型在IE8中不起作用

Question

解决方案: 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字体.字体在其他浏览器中工作正常,我似乎遇到了我的mime类型eot和svg的问题.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中,我的网络字体得到404s,但在Chrome的网络面板中我可以看到它加载字体很好.知道为什么IE8是404的吗？同样有趣的是Firebug没有在Net面板中显示字体,但我可以直观地看到它们正在下载/加载以及通过Firebug打开/关闭/更改它们.

Answer 1

这里的问题是资源处理程序正在寻找扩展名为.eot？#iefix的资源,该资源不存在且mime类型未知.

正如Paul Irish在bulletproof-font-face-implementation-syntax /中解释的那样？是一个修复IE以避免404错误.

因此,如果您使用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");

其他方法是不使用Resource API并按照其在解决方案部分中的相对路径加载它们.