我想使用外部字体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样式都正常工作。知道如何使用自定义字体吗?
我的stylesheet.css位于META-INF/resources/css/stylesheet.css文件
META-INF?所以它被捆绑在一个JAR文件中,而这个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');
另请参阅:
- JSF资源库的用途是什么?应该如何使用它
- 如何在Facelets模板中引用CSS/JS/image资源