css - JSF2 将自定义字体添加到 css 样式表

Question

我想使用外部字体 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 样式都正常工作。知道如何使用自定义字体吗？

Answer 1

My stylesheet.css located in META-INF/resources/css/stylesheet.css file

元信息？所以这是捆绑在一个 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)，而是一个真正的公共(public)库名称。例如，/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');

另见:

• What is the JSF resource library for and how should it be used?
• How to reference CSS / JS / image resource in Facelets template?