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和，我的网络字体获得了404s ，但在Chrome的网络面板中我可以看到它加载字体很好。知道为什么IE8是404的吗？同样有趣的是Firebug没有在Net面板中显示字体，但我可以直观地看到它们正在下载/加载以及通过Firebug打开/关闭/更改它们。

Answer 1

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

正如保罗爱尔兰在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并按照您在解决方案部分中的相对路径加载它们。

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

1 个答案: