JSF2 将自定义字体添加到 CSS 样式表答案

【问题标题】：JSF2 add custom font to css stylesheetJSF2 将自定义字体添加到 CSS 样式表
【发布时间】：2012-03-30 19:35:47
【问题描述】：

我想使用外部字体WebSymbols

我把它放在我的 stylesheet.css 声明中

@font-face{ 
font-family: 'WebSymbolsRegular';
src: url('websymbols-regular-webfont.eot');
src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('websymbols-regular-webfont.woff') format('woff'),
     url('websymbols-regular-webfont.ttf') format('truetype'),
     url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

.fakeImage {
font-family: 'WebSymbolsRegular';
font-size: 12px;
text-decoration: none;
 }

我的 stylesheet.css 位于 META-INF/resources/css/stylesheet.css 文件中。我将字体文件（eot、svg 等）放在同一个目录 - META-INF/resources/css。在我的 jsf 页面的标题中，我引用了这个样式表：

<h:outputStylesheet library="css" name="stylesheet.css" />

但我得到的是常规文本，而不是字体中的特殊符号。所有其他 css 样式都可以正常工作。知道如何使用自定义字体吗？

【问题讨论】：

是的，这在 oracle java ee 6 教程中进行了描述，因为我想参考页面中的图像，例如
好吧不知道。删除了我的评论。

标签： css jsf-2 font-face

【解决方案1】：

我的 stylesheet.css 位于 META-INF/resources/css/stylesheet.css 文件中

元信息？所以这被捆绑在一个 JAR 文件中，该文件又被放入 webapp 的/WEB-INF/lib?

无论如何，您需要使用 #{resource} 解析器来将类路径资源解析为正确的 /javax.faces.resource URL。

src: url("#{resource['css:websymbols-regular-webfont.eot']}");
src: url("#{resource['css:websymbols-regular-webfont.eot']}?#iefix") format('embedded-opentype'),
     url("#{resource['css:websymbols-regular-webfont.woff']}") format('woff'),
     url("#{resource['css:websymbols-regular-webfont.ttf']}") format('truetype'),
     url("#{resource['css:websymbols-regular-webfont.svg']}#WebSymbolsRegular") format('svg');

此外，我建议在/resources 文件夹中添加一个额外的路径，它可以代表真正的 库名称。 library="css" 即资源库的错误使用。它根本不应该代表特定的资源类型（CSS/JS/images），而是一个真正的通用库名称。例如，/common。然后，您可以按如下方式引用样式表和资源：

<h:outputStylesheet library="common" name="css/stylesheet.css" />

和

src: url("#{resource['common:css/websymbols-regular-webfont.eot']}");
src: url("#{resource['common:css/websymbols-regular-webfont.eot']}?#iefix") format('embedded-opentype'),
     url("#{resource['common:css/websymbols-regular-webfont.woff']}") format('woff'),
     url("#{resource['common:css/websymbols-regular-webfont.ttf']}") format('truetype'),
     url("#{resource['common:css/websymbols-regular-webfont.svg']}#WebSymbolsRegular") format('svg');

另见：

【讨论】：