[css] Schriften einbinden für IE

[mtl]

Ich bastel wieder mal an einer Webseite rum. Wie immer arbeite ich zuerst an einer Layout html Datei bis alles für jeden Browser einigermassen gut aussieht, und dann gehe ich an die eigentliche Programmierung.
Neu ist das Thema alternative Schriften. Bei den 'normalen' Browsern funktioniert das einbinden im style sheet ja recht gut:

<style type="text/css">

@font-face 
	{
  		font-family: myriad;
  		src: url(fonts/MyriadPro-Regular.otf);
   	}

*	{
		font-family:myriad;
		font-size:18px;
		color:#00F;
	}
</style>

Chrome, FF und konsorte nimmt das ohne zu meckern an. IE sträubt sich (natürlich) etwas dagegen.
Nach dem Tutorial von http://www.mediaevent.de/css/font-face.html müsste ich den [if gte IE 5] ebenfalls im header platzieren in welchem auf eine *.eot Schriftendatei verwiesen wird. Aber das klappt so irgendwie nicht. Auch nicht wenn ich den IE-Style direkt im Body beim betreffenden Text einfüge. Farbe ändern klappt, von daher müsste es _grundsätzlich_ ja eigentlich laufen, nicht?
Die EOT-Datei habe ich aus einem TTF file online konnvertieren lassen:


Ich versuch das jetzt mittlerweile schon den ganzen Nachmittag lang hin zu kriegen, aber hier hackts einfach.

Kann mir jemand dazu vielleicht weiter helfen?


Danke und liebe Grüsse
Maurus

 

[cebito]

AW: [css] Schriften einbinden für IE

Dein Codeschnipsel zeigt leider dein Problem nicht. Wo bindest du denn die Schrift ein? Du musst die Schrift zuerst laden, bevor du sie den HTML-Elementen zuweisen kannst:

<style>/* ttf laden */</style>
<!--[if gte IE 5]> 
<style>/* eot laden */</style> 
<![endif]-->
<style>/* Schriften den HTML-Elementen zuordnen */</style>

 

[mtl]

AW: [css] Schriften einbinden für IE

Ah, natürlich. ich hab das im Header folgendermassen definiert:

<style type="text/css">

@font-face 
	{
  		font-family: myriad;
  		src: url(fonts/MyriadPro-Regular.otf);
   	}

*	{
		font-family:myriad;
		font-size:18px;
		color:#00F;
	}
</style>

<!--[if gte IE 5]>
<style>
@font-face {
   font-family: myriad;
   src: url(fonts/MyriadPro-Regular.eot);
   }
</style>
<![endif]-->

Im Body platziere ich den Text dann ganz normal, ohne weitere tags oder classes. In Chrome etc. werden die Schriften dann jeweils problemlos übernommen.
Ich war zuerst etwas skeptisch, dass die if-option innerhalb eines Note-Tags sein soll, aber eine Konsultation von SelfHTML hat mir das bestätigt, dass das offenbar so sein soll.
Auf anderen Websites (wie z.B. die auf der ich das Tutorial gefunden habe) läuft das ganze einwandfrei nach dem selben Prinzip.
Mir fällt ein, dass vielleicht auch ein korruptes eot-file der Auslöser für mein Problem sein könnte. Leider ist mir kein Programm bekannt, welches eot-fonts öffnen/anzeigen kann. So kann ich nicht überprüfen ob dieser online-konverter ordentliche Arbeit abgeliefert hat.
Kennst Du da vielleicht was?

 

[cebito]

AW: [css] Schriften einbinden für IE

Du weist doch hier schon Schriftarten zu, bevor du die eot lädst

*{         
font-family:myriad;         
font-size:18px;         
color:#00F;     
}

 

[mtl]

AW: [css] Schriften einbinden für IE

Ah okay, das sehe ich ein. Aber wenn ich das ganze umdrehe hat das nur zur Folge, dass die Zuweisung in Chrome ebenfalls nicht mehr funktioniert:

<style type="text/css">
		/* CSS Code hier einfügen*/ 
@font-face 
	{
  		font-family: myriad;
  		src: url(fonts/MyriadPro-Regular.otf);
   	}
	
<!--[if gte IE 5]>
@font-face {
   font-family: myriad;
   src: url(fonts/MyriadPro-Regular.eot);
   }

<![endif]-->

*	{
		font-family: myriad;
		font-size:18px;
		color:#00F;
	}
</style>

 

[cebito]

AW: [css] Schriften einbinden für IE

Guck dir mal mein Beispiel oben an. Du kannst keine HTML-Kommentare im CSS notieren!

 

[mtl]

AW: [css] Schriften einbinden für IE

Ich bin mir nicht sicher ob ich dir folgen kann. Soll demnach die eot zuweisung noch vor dem css block stattfinden? Weil im nachhinein funktionierts ja offenbar nicht.
Ich kann das im Moment gerade nicht ausprobieren da ich an einem anderen Rechner sitze.

 

[Myhar]

AW: [css] Schriften einbinden für IE

Genau. Wenn man schon abschreibt, dann sollte man auf Abschreibfehler achten.
Ein HTML Kommentar (<!--[if IE6] --> ) kann nicht in einem CSS Bereich vorkommen (<style> </style>)
Des Weiteren wäre es wohl sinnvoller, deine CSS Befehle in eine externe Datei auszulagern.

 

[mtl]

AW: [css] Schriften einbinden für IE

Ich glaube wenn man keinen Lehrer hat der neben einem Sitzt, dann ist der Anfang vom Lernen immer ein abschreiben und testen.
Die CSS-befehle werden zu einem späteren Zeitpunkt ausgelagert. Mir geht es am Anfang einer Programmierung etwas einfacher wenn ich die Befehle im Header oben habe. Aber das ist ja jedem selbst überlassen.

HTML und CSS Tags können nicht gemischt werden. Gut, das macht natürlich Sinn Aber wenn ich den <!-- $$$ --> Tag vor den CSS-Tag setze (vor den <style> bereich), dann krieg ich im browser die Zeile

@font-face { font-family: mauri; src: url(fonts/MyriadPro-Regular.eot); }

als aller erstes, noch vor dem restlichen content ausgegeben. Die Schrift bleibt unverändert TimesNewRoman und nicht wie gewünscht Myriad.

 

[mtl]

AW: [css] Schriften einbinden für IE

Also:
Ich bin nun soweit gekommen, dass ich mit Bestimmtheit sagen kann, dass das konvertierte *.eot File defekt ist, bzw. ich kein korrekt funktionierendes herstellen kann.
Demnach bin ich auf die Suche nach einer anderen Lösung gegangen, und habe diese bei folgendem Link gefunden:


Funktioniert Browserübergreiffend und ist bestechend einfach an zu wenden.
Kann ich bisher jedem empfehlen.

Danke für euren Beistand