我的项目结构是这样的：

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

我同时使用＆＃34;：＆＃34;和＆＃34; /＆＃34;分离器是测试哪一个......显然没有:)

我还在我的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>

现在，在所有这些配置之后，似乎资源处理程序无法加载字体（我的costum和FA的字体）以及JavaScript文件。有趣的是，正确导入了css文件的所有其他样式。同样奇怪的是，当我今天第一次启动服务器时，它的工作原理完全相同 - 在向页面添加图标后，它再也无法工作了。

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

未捕获的TypeError：无法读取属性＆＃39; children＆＃39; null（...）   http://localhost:8080/ $根/ javax.faces.resource / CSS /资源/字体/ Questrial-Regular.ttf
无法加载资源：服务器响应状态为404（未找到）
  http://localhost:8080/ $根/ javax.faces.resource / CSS /资源/字体/ 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

Answer 1

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

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

JSF无法解析@ font-face

我的项目结构是这样的：

1 个答案: