如何在CSS中使用#resource?

时间:2014-05-31 13:41:04

标签: css eclipse jsf jsf-2 glassfish

这就是我在css中引用index.xhtml文件的方式:

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

这就是我使用#resources的方式,它运行良好:

background-image: url("#{resource['img:lang/ico-en.gif']}");

这种方式是它在HTML项目中的工作方式:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello69db.eot?24671060');
  src: url('../font/fontello69db.eot?24671060#iefix') format('embedded-opentype'),
       url('../font/fontello69db.woff?24671060') format('woff'),
       url('../font/fontello69db.ttf?24671060') format('truetype'),
       url('../font/fontello69db.svg?24671060#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?24671060#fontello') format('svg');
  }
}
*/

然后,当我将HTML项目移动到JSF 2项目中时,我想使用#resources,对吧?所以我做了和以前一样的事情但不起作用:

@font-face {
  font-family: 'fontello';
  src: url("#{resource[css:font/fontello69db.eot?24671060']}");
/*  src: url("#{resource[css:font/fontello69db.eot?24671060');*/

  src: url("#{resource[css:font/fontello69db.eot?24671060#iefix']}") format('embedded-opentype'),
       url("#{resource[css:font/fontello69db.woff?24671060']}") format('woff'),
       url("#{resource[css:font/fontello69db.ttf?24671060']}") format('truetype'),
       url("#{resource[css:font/fontello69db.svg?24671060#fontello']}") format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url("#{resource[css:font/fontello.svg?24671060#fontello']}") format('svg');
  }
}
*/

这是我的项目结构:

project

在这种情况下,知道如何正确使用#resource吗?

1 个答案:

答案 0 :(得分:2)

从字体文件名中删除url参数。试试看。

@font-face {
    font-family: 'fontello';
    src: url("#{resource[css:font/fontello69db.eot']}?24671060");

    src: url("#{resource[css:font/fontello69db.eot']}?24671060#iefix") format('embedded-opentype'),
    url("#{resource[css:font/fontello69db.woff']}?24671060") format('woff'),
    url("#{resource[css:font/fontello69db.ttf']}?24671060") format('truetype'),
    url("#{resource[css:font/fontello69db.svg']}?24671060#fontello") format('svg');
    font-weight: normal;
    font-style: normal;
}