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'),



我正在尝试让自定义 Web 字体在 JSF2 应用程序和 IE8 中工作。字体在其他浏览器中运行良好，我的 eot 和 svg 的 mime 类型似乎有问题。IE8 中发生的事情是我得到了在 CSS 中声明的非网络字体后备。

这是我的 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 打开/关闭/更改它们。

4

1 回答 1

8

这里的问题是资源处理程序正在寻找扩展名为 .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");

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

于 2013-04-24T00:47:55.940 回答