如何在JSF中使用诸如Font Awesome之类的第三方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

问题描述

我正在尝试将

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

  WebContent 
 |-资源
 | `-font-awesome 
 | |-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库= 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（＃{资源['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：正常； 
字体样式：正常； 
} 
  

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

重新在服务器日志中看到如下字体文件的JSF1091警告：

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

然后，您需要在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>图片/ svg + xml< / mime-type> 
< / mime-mapping> 
< mime-mapping> 
< extension> ttf< / extension> 
< mime-type>应用程序/ x-font-ttf< / mime-type> 
< / mime-mapping> 
< mime-mapping> 
< extension> woff< / extension> 
< mime-type>应用程序/ x-font-woff< / mime-type> 
< / mime-mapping> 
< mime-mapping> 
< extension> woff2< / extension> 
< mime-type>应用程序/ x-font-woff2< / mime-type> 
< / mime-mapping> 
  

如果您碰巧使用JSF实用程序库 OmniFaces （使用＃{resource} 映射编辑CSS文件的一种替代方法）是安装OmniFaces UnmappedResourceHandler 并重新配置 FacesServlet 根据其文档进行映射。您只需要确保不再通过库引用字体CSS文件即可：

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

另请参见：

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

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之类的第三方CSS库？浏览器找不到CSS文件中引用的字体文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！