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

问题描述

我想使用外部字体 WebSymbols

我把它放在我的 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?

推荐答案

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

元信息?所以这是捆绑在一个 JAR 文件中，而 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 文件夹中放置一个额外的路径，它可以代表真实的库名称.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');

另见:

• 什么是JSF 资源库的用途以及应该如何使用?
• 如何引用 CSS/JS/图片资源在 Facelets 模板中?

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