JSF2网页字体EOT和SVG MIME类型在IE8中无法正常工作。

Question

解决方案： IE8似乎不支持JSF的资源加载。我将src网址更改为相对路径，现在字体已经加载：

//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字体。这些字体在其他浏览器中工作正常，但我似乎在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中，我的Web字体出现404错误，但在Chrome的网络面板中，我可以看到它正常加载字体。你知道为什么IE8会出现404错误吗？另外有趣的是，Firebug在Net面板中没有显示字体，但我可以直观地看到它们被下载/加载，并通过Firebug打开/关闭/更改。

- magenta placenta

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

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

- Ravi Kadaboina

---

谢谢。这帮助我清除了在我的Web应用程序中使用Bootstrap 3时字体资源的_eot_和_svg_错误日志。因此，基本上Bootstraps glyphicons 应该像这样被拉入： url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") - samael