JSF2 web-Schriftarten, die eot-und svg-mime-Typen funktioniert nicht in IE8
LÖSUNG: IE8 scheint nicht, wie die JSF-Ressource laden. Ich habe gerade meine src-url für relative Pfade und die Schriften laden nun:
//this wasn't working for me, 404'ing in IE8
src: url( #{resource['theme/fonts:mycustom_regular-roman-webfont.eot?#iefix']} ) format('embedded-opentype'),
//this works for me in IE8
src: url( ../resources/theme/fonts/mycustom_regular-roman-webfont.eot?#iefix ) format('embedded-opentype'),
Ich versuche, kundenspezifische web-Schriftarten arbeiten in einem JSF2-app und IE8. Die Schriftarten funktionieren in anderen Browsern, ich scheine Probleme mit meinem mime-Typ für eot und svg. Was passiert bei IE8 ist, ich bin immer das nicht-web-font-fallback deklariert in CSS.
Hier ist meine web.xml:
<!-- web fonts -->
<mime-mapping>
<extension>eot</extension>
<mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
<extension>otf</extension>
<mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
<extension>ttf</extension>
<mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff</extension>
<mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
Und hier ist, was die Konsole sagt mir:
[4/23/13 10:59:37:522 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:530 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:534 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:541 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:546 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:552 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.svg#omnes_ods_regularregular. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:557 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml.
[4/23/13 10:59:37:564 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml.
Hier ist, wie meiner Schriften deklariert sind, in der css-Datei:
@font-face {
font-family: 'mycustom_regularregular';
src: url( #{resource['theme/fonts:mycustom_regular-webfont.eot']} );
src: url( #{resource['theme/fonts:mycustom_regular-webfont.eot?#iefix']} ) format('embedded-opentype'),
url( #{resource['theme/fonts:mycustom_regular-webfont.woff']} ) format('woff'),
url( #{resource['theme/fonts:mycustom_regular-webfont.ttf']} ) format('truetype'),
url( #{resource['theme/fonts:mycustom_regular-webfont.svg#omnes_ods_regularregular']} ) format('svg');
font-weight: normal;
font-style: normal;
}
Hier ist, wie die stylesheet geladen wird:
<h:outputStylesheet library="theme" name="stylesheet.css" target="head" />
Jemand irgendwelche Ideen?
EDIT: Neugier erwischte den besseren von mir, so feuerte ich Fiddler 2 und in IE8, ich bin immer 404 für meine web-fonts, aber in Chrome Netz-panel sehe ich, dass es das laden der Schriften in Ordnung. Keine Ahnung warum der IE8 ist 404 ' Ing? Interessant ist auch Firebug zeigt nicht die Schriften Net in der Systemsteuerung, aber ich kann visuell sehen, Sie sind immer heruntergeladen/geladen sowie schalten Sie Sie ein/aus/ändern via Firebug.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist hier das problem der Ressource-handler ist auf der Suche für eine Ressource mit der Endung .eot?#iefix, die es nicht gibt und auch deren mime-Typ unbekannt ist.
Erläutert von Paul Irish in bulletproof-font-face-Implementierung-syntax/ das ? ist ein fix für den IE zur Vermeidung von 404-Fehlern.
Also, wenn Sie mithilfe des Ressourcen-API, die Quell-url sieht in etwa wie folgt:
fügt den Namen der Bibliothek an das Ende gefolgt von'?', so dass Sie nicht brauchen, um hinzuzufügen, dass '?#iefix'.
Aber ich habe nicht Zugriff auf einen Windows-PC, so kann ich nicht überprüfen das jetzt. Aber wenn Sie noch brauchen, um hinzuzufügen,'? #iefix' können Sie etwas wie das hier tun:
denen gezeigt wird, wie unten in der Quelle:
Andere Möglichkeit ist die Verwendung nicht-Ressource-API und laden Sie Sie durch Ihre relative Pfade wie Sie es in Ihrer Lösung Abschnitt.
url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix")