jsf-2 - 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 中工作。字体在其他浏览器中运行良好，我的 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 中，我的网页字体出现 404 字样 ，但在 Chrome 的网络面板中，我可以看到它加载字体很好。知道为什么 IE8 是 404 吗？同样有趣的是 Firebug 没有在 Net 面板中显示字体，但我可以直观地看到它们正在下载/加载以及通过 Firebug 打开/关闭/更改它们。

Answer 1

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

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

另一种方法是不使用资源 API 并像您在解决方案部分所做的那样通过它们的相对路径加载它们。