JSF2将自定义字体添加到CSS样式表 [英] JSF2 add custom font to css stylesheet

问题描述

我想使用外部字体 Web符号

然后我将其放置在我的stylesheet.css声明中

and i placed it my stylesheet.css declaration

@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页面的标题中，我引用了此样式表:

My stylesheet.css located in META-INF/resources/css/stylesheet.css file. I put font files (eot, svg, etc.) in the same directory - META-INF/resources/css. In header of my jsf page i put reference to this stylesheet:

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

但是我得到的不是常规字体的特殊符号.所有其他CSS样式均正常工作.知道如何使用自定义字体吗?

But instead of special symbols from font i got regular text. All other css styles are worked normally. Any idea how to use custom font?

推荐答案

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

META-INF?因此，这是捆绑在一个JAR文件中，然后又将其放入webapp的/WEB-INF/lib中吗?

META-INF? So this is bundled in a JAR file which is in turn dropped in webapp's /WEB-INF/lib?

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

Regardless, you need to use the #{resource} resolver instead to resolve classpath resources to proper /javax.faces.resource URLs .

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文件夹中放置一个附加路径，该路径可以代表 real 库名称. library="css"就是资源库的错误用法.它根本不代表特定的资源类型(CSS/JS/图像)，而是真正的通用库名.例如，/common.然后，您可以引用样式表和资源，如下所示:

Further, I recommend to put one additional path in /resources folder which can then represent the real library name. The library="css" is namely the wrong usage of the resource library. It should not represent specific resource types (CSS/JS/images) at all, but a real common library name. For example, /common. You can then reference the stylesheet and the resources as follows:

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

另请参见:

• 如何引用CSS/JS/图像资源在Facelets模板中?

See also:

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

这篇关于JSF2将自定义字体添加到CSS样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！