Twitter Bootstrap 3 Jsf 2字体错误答案

【问题标题】：Twitter Bootstrap 3 Jsf 2 Font errorTwitter Bootstrap 3 Jsf 2字体错误
【发布时间】：2014-09-14 18:00:27
【问题描述】：

我正在尝试将 Twitter Bootstrap 3 轮播与 jsf 应用程序集成。在某一时刻，我需要将 glyphicons 字体包含到应用程序中，以便左右导航应该起作用。

查看stackoverflow中的一些帖子后，我了解到bootstrap.css中指向的url不正确，需要修改才能使用JSF 2的资源。

轮播显示正常，但导航无法正常工作，控制台中显示以下错误

警告：JSF1091：找不到文件 glyphicons-halflings-regular.svg#glyphicons_halflingsregular 的 mime 类型。要解决此问题，请将 mime 类型映射添加到应用程序 web.xml。 2014 年 7 月 23 日下午 7:08:03 com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource 警告：JSF1064：无法从库、字体中找到或提供资源 glyphicons-halflings-regular.svg#glyphicons_halflingsregular。

以下是我在bootstrap.css中所做的改动

@font-face {
font-family: 'Glyphicons Halflings';


src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}");
src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}?#iefix")    format('embedded-opentype'), 
   url("#{resource['fonts:glyphicons-halflings-regular.woff']}") format('woff'), 
   url("#{resource['fonts:glyphicons-halflings-regular.ttf']}") format('truetype'), 
   url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular']}") format('svg');
}

所有必需的文件都存在于 Webcontent/resources/fonts/ 文件夹中。

【问题讨论】：

标签： twitter-bootstrap jsf-2 fonts

【解决方案1】：

您可能正在使用 Faces Servlet 后缀（例如：*.xhtml，等等），然后 JSF 将此后缀附加到 svg 字体文件

所以你写的这段代码：

url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular']}") format('svg');

结果是这样的：

url("/your_web_app/javax.faces.resource/glyphicons-halflings-regular.svg#glyphicons_halflingsregular.xhtml?ln=fonts")

但是这个文件“glyphicons-halflings-regular.svg#glyphicons_halflingsregular.xhtml”不存在。

将您的代码更改为：

url("#{resource['fonts:glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular") format('svg');

结果如下：

url("/your_web_app/javax.faces.resource/glyphicons-halflings-regular.svg.xhtml?ln=fonts#glyphicons_halflingsregular")

你的问题将得到解决！

原谅我糟糕的英语:)

【讨论】：