将自定义字体导入 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");

但它也不起作用。

如何正确导入字体？

提前致谢。

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

Answer 2

我也有同样的问题。这个网址有效

    @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）

Answer 3

我遇到了这个问题，我解决如下：

@font-face {
    font-family: "Roboto-Light";
    src: url('#{resource["fonts/Roboto-Light.ttf"]}');
}