如何在 JSF 中使用 Font Awesome 等 3rd 方 CSS 库?浏览器找不到 CSS 文件中引用的字体文件 [英] How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file

问题描述

我正在尝试在 JSF 中集成

提供如下所示的文件夹结构，

WebContent|-- 资源|`--字体很棒||-- css|||-- font-awesome.css||`--font-awesome.min.css|`-- 字体||-- 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文件以使用EL中的#{resource}映射来引用带有适当库的/resources文件夹中的字体文件和资源名称(并且由于库名称已经作为查询字符串参数结束，您还需要将 ? 替换为 &，如果您不使用，则不需要一个库名).

@font-face {字体系列:'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") 格式('embedded-opentype'),url("#{resource['font-awesome:fonts/fontawesome-webfont.woff2']}&v=4.3.0") 格式('woff2'),url("#{resource['font-awesome:fonts/fontawesome-webfont.woff']}&v=4.3.0") 格式('woff'),url("#{resource['font-awesome:fonts/fontawesome-webfont.ttf']}&v=4.3.0") 格式('truetype'),url("#{resource['font-awesome:fonts/fontawesome-webfont.svg']}&v=4.3.0#fontawesomeregular") 格式('svg');字体粗细:正常；字体样式:正常；}

确保在编辑 CSS 文件后重新启动服务器.在 JSF 资源处理程序第一次读取 CSS 文件并随后在整个应用程序范围内记住时，仅在特定 CSS 文件中检测到 EL 表达式一次.

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

<块引用>

警告:JSF1091:找不到文件 [某些字体文件] 的 MIME 类型.要解决此问题，请将 MIME 类型映射添加到应用程序 web.xml.

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

<extension>eot</extension><mime-type>application/vnd.ms-fontobject</mime-type></mime-mapping><mime-mapping><extension>otf</extension><mime-type>字体/opentype</mime-type></mime-mapping><mime-mapping><扩展>svg</扩展><mime-type>image/svg+xml</mime-type></mime-mapping><mime-mapping><扩展名>ttf</扩展名><mime-type>application/x-font-ttf</mime-type></mime-mapping><mime-mapping><扩展>woff</扩展><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，使用 #{ 编辑 CSS 文件的替代方法resource} 映射，就是安装OmniFaces UnmappedResourceHandler并根据其文档重新配置 FacesServlet 映射.您只需要确保不再通过 library 引用字体 CSS 文件:

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

另见:

• 如何使用来自 webjars.org 的 Font Awesome 和 JSF

I'm trying to integrate Font Awesome in JSF.

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

But the browser can't find the font files. They appear as empty squares:

I expected them to look like below:

How is this caused and how can I solve it?

解决方案

The Font Awesome CSS file is by default referencing those font files via a relative path ../ like below:

@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;
}

This will fail if the CSS file itself is requested on a different path. The JSF <h:outputStylesheet> will do that if you specify the library attribute. Moreover, the JSF will use a special /javax.faces.resource/* prefix pattern for those resources so that specifically the JSF resource handler will be invoked which allows customization freedom. Detail can be found in What is the JSF resource library for and how should it be used?

Provided a folder structure like below,

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
 :

And the Font Awesome CSS being included as below:

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

Then you need to edit the CSS file as below to use #{resource} mapping in EL to reference the font files in /resources folder with the appropriate library and resource name (and as library name ends up as a query string parameter already, you also need to replace ? by &, this is not necessary if you don't use a library name).

@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;
}

Make sure you restart the server after editing the CSS file. The presence of EL expressions in a certain CSS file is detected only once during the first time the JSF resource handler reads the CSS file and then remembered applicationwide.

In case you're seeing JSF1091 warnings in server logs for those font files like below:

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.

Then you need to act accordingly by adding below mime mappings to 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>

If you happen to use JSF utility library OmniFaces, an alternative to editing the CSS file with the #{resource} mapping, is to install the OmniFaces UnmappedResourceHandler and reconfigure the FacesServlet mapping as per its documentation. You only need to make sure that you don't reference the font CSS file via library anymore:

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

See also:

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

这篇关于如何在 JSF 中使用 Font Awesome 等 3rd 方 CSS 库?浏览器找不到 CSS 文件中引用的字体文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！