我想使用外部字体
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样式都正常工作.知道如何使用自定义字体吗？
解决方法
My stylesheet.css located in Meta-INF/resources/css/stylesheet.css file
Meta-INF？所以这是捆绑在一个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');
也可以看看：
> What is the JSF resource library for and how should it be used?
> How to reference CSS / JS / image resource in Facelets template?
