JSF 无法解析@font-face 的字体资源

Question

我目前正在尝试 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 的情况下将字体作为资源处理，我更改了样式表的代码：

字体-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");
}

我同时使用“:”和“/”分隔符的事实是为了测试哪个在工作...显然 none :)

我还在 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 文件的所有其他样式都被正确导入。同样奇怪的是，当我今天第一次启动服务器时，它的工作方式完全相同——在页面上添加了一个图标后，它不再工作了。

我在浏览器中收到以下错误通知：

Uncaught TypeError: Cannot read property 'children' of null(…) http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)

如有任何帮助，我将不胜感激

服务器：Glassfish 4.1.1

Answer 1

虽然这听起来令人失望，但这只是我的浏览器缓存了所有资源。

使用 Ctrl + F5 后，浏览器重新加载页面和所有样式表

通常在进行 Web 开发时关闭浏览器缓存是有益的:-)。

JSF 无法解析@font-face 的字体资源

JSF cannot resolve font resources for @font-face

jsf

font-face

font-awesome

我的项目结构是这样的：