Probleme mit Font Face und IE8

[mischaef]

Hallo zusammen,

Habe hier den Tipp bekommen für Webseiten doch mal WebFonts einzusetzen. Habe mich mal ein wenig damit beschäftigt und versucht das ganze einzubinden.

Im FireFoxklappt das ganze ganz gut, aber im IE8 sieht es einfach nur schrecklich aus, die Buchstaben sind versetzt und teilweise auch angeschnitten.

Siehe hier (die Navi und die Überschrift unten sind WebFonts):

..:: xxx ::..

Beim IE sieht das irgendwie pixelig und verzerrt aus...

Habe das ganze aus der Qlassik via Font Squirrel machen lassen. Habe dann eine Menge Dateien und die CSS-Anweisung bekommen:

@font-face {
    font-family: 'QlassikBoldRegular';
    src: url('../fonts/qlassikbold_tb-webfont.eot');
    src: url('../fonts/qlassikbold_tb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/qlassikbold_tb-webfont.woff') format('woff'),
         url('../fonts/qlassikbold_tb-webfont.ttf') format('truetype'),
         url('../fonts/qlassikbold_tb-webfont.svg#QlassikBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QlassikMediumRegular';
    src: url('../fonts/qlassik_tb-webfont.eot');
    src: url('../fonts/qlassik_tb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/qlassik_tb-webfont.woff') format('woff'),
         url('../fonts/qlassik_tb-webfont.ttf') format('truetype'),
         url('../fonts/qlassik_tb-webfont.svg#QlassikMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Ist da etwas falsch gelaufen oder kann der IE8 das nicht besser? Kann es seinn dass es etwas mit der Kantenglättung vom IE zu tun hat?

Bei letzterem muss ich doch wieder auf die üblichen verdächtigen zurück...

Besten dank

Michael

[fakerer]

Hallo,
also ich hab FontFace noch nie benutzt, kann dir aber sagen im IE9 passt es.
Aber ich würde entweder ein StandardFont nehmen oder das ganze als Bilder einpflegen zwecks kompatibilität.

[simonpicos]

Also ich bin mir nicht sicher, aber gehört das nicht zum CSS3 Standard? Den unterstützt der IE8 nicht glaube ich. (ich habe mich leider noch nicht genauer damit beschäftigt -.- )
Probiers mal im IE9 im aktuellen Chrome Firefox 4 und im aktuellen safari. Da sollts auf jeden Fall funktioniern

[mischaef]

Zitat von simonpicos

Probiers mal im IE9 im aktuellen Chrome Firefox 4 und im aktuellen safari. Da sollts auf jeden Fall funktioniern

Das nutzt mir aber nichts wenn die Besucher meiner Webseite mit de, IE8 die Seite besuchen...;-)

Ich würde schon gerne die Schriften benuutzen, da man damit schon ein wenig flexibler ist.

Ich habe früher für verschiedene css-Dateien immer eine Weiche benutzt:

<!--[if lte IE 6]>
<link href="css/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="css/style_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

KÖnnte das auch als Weiche für die Navigation dienen? Also dass man dort komplexeren Code einfügen könnte?

[fakerer]

du kannst ja mit $_SERVER['HTTP_USER_AGENT'] den Browser Feststellen und je nach Browser dann einen andre Navigation auswählen <!--[if lte IE 6]> klappt so viel ich weiss nur für css. Aber ich wüsste jetzt nicht warum es nicht auch für Inhalte klappen sollte vielleicht klappt es nur im Headerbereich aber kannst du ja leicht testen aber ich würds über http_user_agent machen.

[mischaef]

Und wie zuverlässig ist das?

[fakerer]

einfach abfragen ob es ein Browser ist der das FontFace unterstützt wenn nicht einfach eine alternative mit normalen Font und so wird auch der standard Font angezeigt falls http_user_agent unterdrückt wird oder nicht korrekt erkannt wird.
Und somit stellt sich die Frage nicht

[mischaef]

OK, es wird immer verwirrender..;-)

Und wie kann ich abfragen, ob der Browser FontFace unterstützt?

Für mich geht es eher darum, dass ich, wenn er es nicht unterstützt, zumindest die Navi als Grafik machen würde...

[Myhar]

font-face unterstützen eigentlich alle Browser heutzutage. IE unterstützt das ab Version 5. Nur leider brauchen die IE Browser ein eigenes Format, weshalb das ganze nicht ganz so trivial ist.
Hier wird erklärt, wie man
@font-face korrekt implementiert.

Außerdem wollte ich noch anmerken, dass ich bei deiner Beispielseite keinen Unterschied zwischen IE8, Opera und Chrome feststellen kann. Dort schauen die Schriften gleich aus... Vielleicht hast du bei dir etwas eingestellt, was das Aussehen beeinflusst?

L. G.

[mischaef]

Wie gesagt, auf dem FF 3.6 sehen sie wesentlich glatter aus...

[CrazyLopp]

Wie schon erwähnt möchte der IE gerne sein eigenes Format besitzen, zudem wirst du nie ein zu 100% gleiches Ergebnis erhalten, denn die Rendereigenschaften sind von Browser zu Browser unterschiedlich und das ist nicht nur bei FontFace so...

Da ich die Schriftart jetzt nicht aus dem Stehgreif kenne kannst du aber auch einmal schauen ob diese nicht sogar eventuell bei Google Fonts hinterlegt ist, dann kannst du diese einfach einbinden und Google übernimmt den Rest! Ich habe es auch einmal verwendet, das Ergebnis war auch gut!