[英]Import custom fonts to JSF
I can't import custom fonts into my JSF pages.我无法将自定义 fonts 导入我的 JSF 页面。 Project structure looks like this:
项目结构如下所示:
I've tried to write the following in my styles.css:我试图在我的 styles.css 中写下以下内容:
@font-face {
font-family: "Gotham Pro Bold";
src: url('#{resource["fonts/GothaProBol.otf"]}');
}
But it doesn't work.但它不起作用。 It gets compiled to
/javax.faces.resource/fonts/GothaProBol.otf.xhtml
, but the font is not in javax.faces.resource
and I have no idea why it appends .xhtml
.它被编译为
/javax.faces.resource/fonts/GothaProBol.otf.xhtml
,但字体不在javax.faces.resource
中,我不知道为什么它附加.xhtml
。
The following:下列:
src: url("#{facesContext.externalContext.requestContextPath}/resources/fonts/GothaProBol.otf");
is compiled to被编译成
src: url("/resources/fonts/GothaProBol.otf");
but it doesn't work either.但它也不起作用。
How do I import the fonts properly?如何正确导入 fonts?
Thanks in advance.提前致谢。
Did this using OmniFaces : 这样做是使用OmniFaces进行的 :
Added the dependency ( pom.xml
): 添加了依赖项 (
pom.xml
):
<dependency> <groupId>org.omnifaces</groupId> <artifactId>omnifaces</artifactId> <version>1.8.1</version> </dependency>
Added OmniFaces' resource handler to faces-config.xml
: 在
faces-config.xml
添加了OmniFaces的资源处理程序:
<application> <resource-handler> org.omnifaces.resourcehandler.UnmappedResourceHandler </resource-handler> </application>
Mapped /javax.faces.resource/*
to FacesServlet
as follows ( web.xml
): 将
/javax.faces.resource/*
映射到FacesServlet
如下( web.xml
):
<servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/javax.faces.resource/*</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping>
Used #{resource["<path>"]}
in CSS, like so: 在CSS中使用
#{resource["<path>"]}
,如下所示:
@font-face { font-family: "Gotham Pro Bold"; src: url('#{resource["fonts/GothaProBol.otf"]}'); }
I had the same problem.我有同样的问题。 This URL works
这个 URL 有效
@font-face {
font-family: "MyFont";
src:
url("mfont/mfont.ttf.xhtml?ln=fonts")
format("truetype")
}
The file is situated in "/resources/fonts/mfont/mfont.ttf"该文件位于“/resources/fonts/mfont/mfont.ttf”
Also note that the css file itself is included using h:outputStylesheet (because font urls need to be relative to css)另请注意,css 文件本身包含在使用 h:outputStylesheet 中(因为字体 url 需要相对于 css)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.