JSF2 hinzufügen von benutzerdefinierten schriftart in css-stylesheet

möchte ich die Verwendung von externen schriftart WebSymbols

und ich legte ihn mir im stylesheet.css-Deklaration

@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;
 }

Mein stylesheet.css befindet sich in META-INF/resources/css/stylesheet.css-Datei. Ich setzen Sie font-Dateien (eot, svg, etc.) im gleichen Verzeichnis META-INF/resources/css. Im header meiner jsf-Seite, die ich Referenz auf das stylesheet:

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

Sondern von speziellen Symbolen aus dem font hab ich normalen text. Alle anderen css-Stile arbeitete normal. Irgendeine Idee, wie benutzerdefinierte schriftart?

  • ja, das beschrieben ist in oracle java ee 6 tutorial, denn ich will, Bezugnahme, zum Beispiel, um Bilder von der Seite, als <h:graphicImage value="#{resource['images:filelist.png']}" styleClass="popupPanelLink" />
  • Ok, wusste nicht, dass. Gelöscht mein Kommentar.
InformationsquelleAutor Andrey | 2012-03-14
  1. 19

    Mein stylesheet.css befindet sich in META-INF/resources/css/stylesheet.css-Datei

    META-INF? So ist dies gebündelt in einer JAR-Datei, die wiederum fiel in der webapp ist /WEB-INF/lib?

    Unabhängig, Sie benötigen, um die #{resource} resolver, statt Sie zu beheben classpath-Ressourcen, um die richtige /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');

    Weiter, empfehle ich einen zusätzlichen Weg in /resources Ordner, die dann repräsentieren die real name der Bibliothek. Die library="css" ist nämlich die falsche Nutzung der Ressource Bibliothek. Es sollte nicht für bestimmte resource-Typen (CSS/JS/Bilder), aber eine wirkliche gemeinsame name der Bibliothek. Zum Beispiel /common. Sie können dann darauf verweisen, das stylesheet und die Ressourcen wie folgt:

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

    und

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

    Siehe auch:

    InformationsquelleAutor BalusC
Schreibe einen Kommentar