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

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

META-INF？所以这是捆绑在一个JAR文件中,而这个文件又在webapp中删除了/WEB-INF/lib？

无论如何,您需要使用#{resource}解析程序来将类路径资源解析为正确的/javax.faces.resourceURL.

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');

也可以看看:

• 什么是JSF资源库以及如何使用它？
• 如何在Facelets模板中引用CSS/JS /图像资源？