将自定义字体导入JSF

Question

我可以帮您将自定义字体导入JSF页面。项目结构如下所示： 我尝试在styles.css中写入以下内容：

@font-face {
    font-family: "Gotham Pro Bold";
    src: url('#{resource["fonts/GothaProBol.otf"]}');
}

但是它不起作用。它被编译为/javax.faces.resource/fonts/GothaProBol.otf.xhtml，但字体不在javax.faces.resource中，我不知道为什么会附加.xhtml。

以下内容：

src: url("#{facesContext.externalContext.requestContextPath}/resources/fonts/GothaProBol.otf");

被编译为

src: url("/resources/fonts/GothaProBol.otf");

但是它也没有起作用。

我该如何正确地导入字体？

提前感谢。

- Dmitriy Tkachenko

---

类似的问题在这里JSF2向CSS样式表添加自定义字体。 - Abdelghani Roussi

Answer 1

使用OmniFaces完成了这个操作：

1. 添加了依赖项 (pom.xml):

   <dependency> <groupId>org.omnifaces</groupId> <artifactId>omnifaces</artifactId> <version>1.8.1</version> </dependency>

2. 将OmniFaces的资源处理程序添加到faces-config.xml中：

   <application> <resource-handler> org.omnifaces.resourcehandler.UnmappedResourceHandler </resource-handler> </application>

3. 将/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>

4. 在CSS中使用#{resource["<path>"]}，如下所示：

   @font-face { font-family: "Gotham Pro Bold"; src: url('#{resource["fonts/GothaProBol.otf"]}'); }

- Dmitriy Tkachenko

---

我发现我不需要使用<url-pattern>/javax.faces.resource/*</url-pattern>。 - Mark W

Answer 2

我也遇到了同样的问题。这个URL可以使用

    @font-face {
    font-family: "MyFont";
    src:
    url("mfont/mfont.ttf.xhtml?ln=fonts")
    format("truetype")
    }

该文件位于"/resources/fonts/mfont/mfont.ttf"

还请注意，css文件本身是使用h:outputStylesheet包含的（因为字体url需要相对于css）

- Sergej Zr