【发布时间】：2017-04-02 19:38:42
【问题描述】：
我目前正在尝试 a) 添加一些非标准字体和 b) 将 font-awsome 图标库添加到我的项目中。我已经在他们的网站上下载了最新版本的 FA 4.7.0。
我的项目结构是这样的：
web
----resources
---- css
---- default.css
---- fonts
---- Raleway-Regular.ttf
---- Roboto-Regular.ttf
---- Questrial-Regular.ttf
---- Poppins-Regular.ttf
---- font-awesome-4.7.0
---- css
---- font-awesome.css
---- font-awesome.min.css
---- fonts
---- fontawesome-webfont.eot
---- fontawesome-webfont.woff
---- fontawesome-webfont.woff2
---- fontawesome-webfont.svg
---- fontawesome-webfont.ttf
---- js
---- default.js
fontawesome.css 和我的 default.css 文件都通过@font-face 定义字体。 知道 JSF 不使用 EL 就无法将字体作为资源处理，所以我更改了样式表的代码：
font-awesome.css
@font-face {
font-family: 'FontAwesome';
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&v=4.7.0");
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff2']}&v=4.7.0") format('woff2'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff']}&v=4.7.0") format('woff'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.ttf']}&v=4.7.0") format('truetype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.svg']}&v=4.7.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
我的 css 文件引用的字体如下：
@font-face {
font-family: Railway;
src: url("#{resource['fonts:Raleway-Regular.ttf']}") format("truetype");
}
@font-face {
font-family: Questrial;
src: url("#{resource['fonts/Questrial-Regular.ttf']}") format("truetype");
}
@font-face {
font-family: Poppins;
src: url("#{resource['fonts/Poppins-Regular.ttf']}") format("truetype");
}
@font-face {
font-family: "Roboto";
src: url("#{resource['fonts:Roboto-Regular.ttf']}") format("truetype");
}
我同时使用“：”和“/”分隔符的事实是为了测试哪个在工作......显然没有:)
我还在我的 web.xml 中添加了所有必要的 MIME 类型映射。
在 home.xhtml 文件中，我这样使用这些资源：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<h:outputStylesheet library="font-awesome-4.7.0" name="css/font-awesome.css" />
<h:outputStylesheet name="css/default.css" />
<h:outputScript name="js/default.js" />
</h:head>
现在在所有这些配置之后，资源处理程序似乎无法加载字体（我的服装和 FA 字体）以及 JavaScript 文件。有趣的是，所有其他样式的 css 文件都已正确导入。同样奇怪的是，当我今天第一次启动服务器时，它的工作方式完全相同——在页面上添加了一个网站图标后，它就不再工作了。
我在浏览器中收到以下错误通知：
未捕获的类型错误：无法读取 null(...) 的属性“子项” http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
加载资源失败：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
加载资源失败：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0
加载资源失败：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf
加载失败资源：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf
加载资源失败：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0
加载资源失败：服务器响应状态为 404（未找到）
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0
加载资源失败：服务器响应状态404 个（未找到）
如果有任何帮助，我将不胜感激
服务器：Glassfish 4.1.1
【问题讨论】：
-
再一次，如果我第一次启动服务器，它可以很好地加载资源。我正在使用 IntelliJ Idea，每当我更新了一些 xhtml 页面时，我都会单击“更新类和资源”功能。之后不再加载资源......似乎 JSF 仅在服务器启动时处理资源 - 如果有人知道有关此主题的更多信息，我将不胜感激......
标签： jsf font-face font-awesome