JSF2 web字体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" />

有人有什么想法吗?

编辑:好奇心让我更好，所以我在IE8中启动了Fiddler 2和，我的网页字体得到404，但在Chrome的网络面板中，我可以看到它加载字体很好。知道IE8为什么是404吗?同样有趣的是，Firebug并没有在Net面板中显示字体，但是我可以直观地看到它们正在被下载/加载，以及通过Firebug打开/关闭/更改字体。

Answer 1

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

正如Paul Irish在bulletproproof -font-face-implementation-syntax/the ?是对IE避免404错误的修复。

所以如果你使用资源API，源url将看起来像下面:

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

将库名添加到后面的'?，所以你不需要添加'?#iefix'。

但是我没有Windows电脑，所以我现在无法验证。但如果你还需要加上'?你可以这样做:

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，并通过它们的相对路径加载它们，就像你在解决方案部分所做的那样。