JSF无法解析@font-face的字体资源
我目前正在尝试a）添加一些非标准字体，b）在我的项目中添加一些图标库。我已经在他们的网站上加载了最新版本的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
两者都很棒。css和我的默认设置。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中添加了所有必要的MIME类型映射。xml。
在家里。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文件的所有其他样式都被正确导入。同样奇怪的是，当我今天第一次启动服务器时，它的工作方式完全相同——在向页面添加了一个图标后，它不再工作了。
我在浏览器中收到以下错误通知：
未捕获的TypeError：无法读取null（…）的属性“children”http://localhost:8080/$根/javax。面。资源/css/resources/fonts/Questrial Regular。ttf加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/css/资源/字体/Raleway常规。ttf加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/字体/字体很棒的webfont。woff2？v=4.7.0加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/css/资源/字体/Poppins常规。ttf加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/css/资源/字体/Roboto常规。ttf加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/字体/字体很棒的webfont。沃夫？v=4.7.0加载资源失败：服务器响应状态为404（未找到）
http://localhost:8080/$根/javax。面。资源/字体/字体很棒的webfont。ttf？v=4.7.0加载资源失败：服务器响应状态为404（未找到）
如果有任何帮助，我将不胜感激
服务器：Glassfish 4.1.1
共有1个答案
-
问题内容： 是否可以在页面加载之前预加载或以其他方式缓存@ font-face字体（最有可能使用javascript），以便在页面最终加载时不会出现难看的跳转？ 问题答案： 我目前尚无任何避免字体加载时出现闪烁的技术，但是您可以通过为字体发送适当的缓存头并确保该请求尽快通过来最大程度地减少闪烁。
-
@font-face跟其在CSS中作用表现一样，在后面简单地添加个块状属性即可，类似下面： @font-face font-family Geo font-style normal src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo font-family Geo 生成为： @font-face { font-famil
-
我试着为我的网站设置一个自定义字体，但它在火狐，Chrome或Edge/IE上都不起作用。Firefox开发者工具中的网络部分说没有找到字体，并列出了404，尽管URL应该是正确的。这是我的代码： null
-
我在用一个工具自动生成CSS，它生成下面的@font-face标签和对应的段落Style 注意，指定的字体已经是Garamond字体的斜体版本，从技术上来说,< code>font-style:italic行是多余的。 然而，这并不奏效(我在FF、Chrome 所以，我有2个问题 > 为什么这不起作用，也就是说，为什么使用会导致它不起作用？ 有没有办法通过javascript“覆盖”@font f
-
这是一个愚蠢的问题，我想有一个简单的解决办法。我在Wordpress主题中使用web字体--我正在工作的站点有两个域，可以用来访问同一个站点。 在我的CSS中，我使用了font-squirrel格式来声明字体： 当我转到其中一个域时，这工作很好，但是当我通过另一个域转到站点时，字体无法加载，因为它被认为是“跨站点”请求。基本上，当我访问domain1.com时，请求如下所示:http://www.
-
问题内容： 我正在尝试使用CSS文件加载字体，但是字体从未加载。这是我的目录结构。 然后在我有加载程序来获取字体。 在我的CSS文件中，我有以下内容： 最后，我使用以下命令调用我的CSS文件： 一切正常，但字体永远不会加载。 问题答案： 在尝试了很多东西之后，下一个装载机完成了工作。我使用url-loader代替了文件加载器。您需要安装url-loader。