css - 如何在 JSF 中使用第三方 CSS 库，例如 Font Awesome？浏览器找不到 CSS 文件中引用的字体文件

Question

我正在尝试整合 Font Awesome在 JSF 中。

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

但是浏览器找不到字体文件。它们显示为空方 block :

我希望它们看起来像下面这样:

这是怎么引起的，我该如何解决？

Answer 1

Font Awesome CSS 文件默认通过相对路径引用这些字体文件 ../如下所示:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

如果在不同的路径上请求 CSS 文件本身，这将失败。 JSF <h:outputStylesheet>如果您指定 library 就会这样做属性。此外，JSF 将使用特殊的 /javax.faces.resource/*。这些资源的前缀模式，以便专门调用 JSF 资源处理程序，从而允许自定义自由。详情可见What is the JSF resource library for and how should it be used?

提供如下文件夹结构，

WebContent
 |-- resources
 |    `-- font-awesome
 |         |-- css
 |         |    |-- font-awesome.css
 |         |    `-- font-awesome.min.css
 |         `-- fonts
 |              |-- fontawesome-webfont.eot
 |              |-- fontawesome-webfont.svg
 |              |-- fontawesome-webfont.ttf
 |              |-- fontawesome-webfont.woff
 |              `-- fontawesome-webfont.woff2
 :

并且 Font Awesome CSS 被包含如下:

<h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" />

然后您需要按如下方式编辑 CSS 文件以使用 #{resource}在 EL 中映射以引用 /resources 中的字体文件具有适当的库和资源名称的文件夹(并且由于库名称已经作为查询字符串参数结束，您还需要将 ? 替换为 & ，如果您不使用库名称，则不需要这样做)。

@font-face {
  font-family: 'FontAwesome';
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&v=4.3.0");
  src: url("#{resource['font-awesome:fonts/fontawesome-webfont.eot']}&#iefix&v=4.3.0") format('embedded-opentype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&v=4.3.0") format('woff2'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&v=4.3.0") format('woff'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&v=4.3.0") format('truetype'),
       url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&v=4.3.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

确保在编辑 CSS 文件后重新启动服务器。在 JSF 资源处理程序第一次读取 CSS 文件时，某个 CSS 文件中是否存在 EL 表达式只会被检测到一次，然后会在整个应用程序中记住。

如果您在服务器日志中看到这些字体文件的 JSF1091 警告，如下所示:

WARNING: JSF1091: No mime type could be found for file [some font file]. To resolve this, add a mime-type mapping to the applications web.xml.

然后您需要通过将以下 mime 映射添加到 web.xml 来采取相应的行动:

<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>svg</extension>
    <mime-type>image/svg+xml</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>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping>

如果您碰巧使用了 JSF 实用程序库 OmniFaces ，使用 #{resource} 编辑 CSS 文件的替代方法映射，就是安装OmniFaces UnmappedResourceHandler 并重新配置 FacesServlet根据其文档进行映射。你只需要确保你没有通过 library 引用字体 CSS 文件。不再:

<h:outputStylesheet name="font-awesome/css/font-awesome.min.css" />

另见:

• How to use Font Awesome from webjars.org with JSF