✔ Schriftart/Fonts Crossbrowser-fähig aufbauen

J

Joe

Erfahrenes Mitglied
Ich überarbeite gerade etwas das Design meiner Seite. So grafisch bin ich eher wohl kein Genie :)

Zum Problem:
Beim ausprobieren verschiedener Fonts (Standart) stellte ich fest das es a) Utopisch übergrosse Grössen im IE darstellt und oder b) ganz andere Schriftarten im IE darstellt.
Im Firefox hingegen sieht das so wie gewollt aus.
Ausserdem habt ihr schon mal nen Textschatten für den IE hinbekommen?

Wäre nett wenn also jemand mir Tipps zu den angesprochenen Themen geben kann.
Meine Seite: http://www.end-time.de
CSS:
CSS: 
body
{
background-color: #000;
background-image: url(../img/wasteland3.jpg);
background-repeat: no-repeat;
background-position:top center;
background-attachment:fixed;
padding:0px;
text-align: center;
}
div#wrapper{
width: 748px;
	margin: 15px auto;
	text-align: left;
		//  Fusszeile: Hintergrundbild soll sichtbar/ nicht sichtbar sein
	// background: url(../img/content_hg.gif) repeat-y;
}
div#header{
margin: 15px 0 0 0;
width: 743px;
}
div#navi{
margin: 153px 0 0 0;
background: url(../img/navi.png) no-repeat;
width: 135px;
height: 200px;
float: left;
}
div#login{
margin: 10px 0px 0px 0px;
background: url(../img/login.png) no-repeat;
width: 135px;
height: 100px;
float: left;
}

div#content{
   width: 608px;
   height: 600px;
	float: right;
		background: url(../img/testglas.png) no-repeat;
}
div#news{
   width: 304px;
	float: right;
}
div#counter{
position:absolute; top:650px;
	float: right;
}
div#footer{
//background-color: #454545;
width: 608px;
float: right;
}
.clear{
clear: both;
}
div#title{
background: url(../img/MettalHeader.png) no-repeat;
float: right;
width: 608px;
height: 150px;
}
a img{
border: 0;
}
.title_ausrichtung{
margin: 45px 0 0 55px;
//text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;
}
.title_browsergame{
font-family: Impact, fantasy;
font-size: 240%;
font-weight: bold;
color: #8B8970;
text-shadow: 2px 2px 0px #202020, -2px -2px 0px #606060;
}
.title_keywords{
font-family: Impact, fantasy;
font-size: 100%;
letter-spacing: 2px;
color: #EECFA1;
text-shadow: 2px 2px 0px #202020, -2px -2px 0px #606060;
}
ul.navi{
font-family: Oldtown, fantasy;
font-size: 14px;
line-height: 180%;
list-style-type: none;
margin: 0 25px 0 0;
padding: 0;
text-align: right;
}
a.navi{
color: #EECFA1;
text-decoration: none;
padding: 0 25px 0 0;
}
a.navi:hover{
text-decoration: underline;
background: url(../img/navi_dot_hover.gif) no-repeat right;
}
a.navi_aktiv{
color: #CDBE70;
text-decoration: none;
padding: 0 25px 0 0;
font-weight: bold;
background: url(../img/navi_dot_aktiv.gif) no-repeat right;
}
a.navi_aktiv:hover{
text-decoration: underline;
}
div#footer_ausrichtung{
font-family: Charcoal, Chicago, sans-serif;
font-size: 80%;
color: #0000CD;
// border-top: 1px dashed #F60;
margin: 0 30px 15px 30px;
padding-top: 15px;
}
.links{
float: left;
}
.rechts{
float: right;
}
.unten{
float: right;
padding:  0px 0px 50px 0px;
}
.ta_r{
text-align: right;
} 
h1{
	margin: 10px 10px 10px 10px;
	font-family: Impact, fantasy;
	font-size: 120%;
	font-weight: normal;
	color: 	#CDBE70;
	text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;
}
h2{
	margin: 10px 10px 10px 10px;
	font-family: Charcoal, Chicago, sans-serif;
	font-size: 80%;
	font-weight: bold;
	color: #CDBE70;
	text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;
}
div#content p{
	margin: 10px 10px 10px 10px;
	font-size: 90%;
	line-height: 150%;
	color: #EECFA1;
	font-family: Charcoal, Chicago, sans-serif;
	text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;
}
p.or{
	padding: 0;
	margin: 0;
}
div.border-right{
	border-right: 1px solid #000;
height: 580px;
}
div.border-top{
	border-top: 1px solid #000;
}
div#content .datum{
	color: #FFB90F;
	font-size: 70%;
}
div#content .autor{
		margin: 10px 10px 10px 10px;
	color: #EE7942;
	font-size: 80%;
}
div#content .news_text{
	font-size: 75%;
	line-height: 120%;
}
.fett{
	font-weight: bold;
}
a{
	color: #CD950C;
}
a:hover{
	text-decoration: none;
}
.infobox{
	padding: 10px 15px;
	border: 1px solid #000;
	background-color: #5C5C5C;
}
 
Hmm so wie ich das mitbekommen habe ist nur der IE in der Lage alle Fonts abzubilden. Ich schätze das in meinen Fall WOFF fonts die einzigen sind die alle gängigen Browser beherschen.

Ehrlich da gehört ne Din ider ISO Norm langsam hinne. Das ist ja ein pures Chaos wenn man sich das erste mal damit auseinandersetzt.

Danke dir javaDeveloper2011 immerhin bringt mich "das" WOFF fonts etwas weiter :)
 
Willkommen im Club. Nachdem es wohl nie gelingen wird, diese komischen Dinger auszurotten, setze ich auf Google Fonts. Die Auswahl ist inzwischen so groß, daß fast alle Bedürfnisse damit bedient werden können.
Aber setz keine zu großen Hoffnungen auf Google Fonts, Fontsquirrel usw. Nach meiner Erfahrung wünschen sich vor allem Windows User recht schnell wieder Standardschriften zurück, da es scheinbar noch immer große Schwierigkeiten macht, Nicht-Standard-Schriften augenfreundlich scharf darzustellen. Ich höre jedenfalls immer wieder Klagen von Windows Usern, daß diese oder jene Schrift unscharf wäre. Nach einem Wechsel auf die ausgelutschten Standard Fonts ist wieder alles gut. Linux kann das etwas besser und Mac OS richtig gut. Deshalb nutze ich besondere Schriften nur noch als Überschriften, die schön groß geschrieben sind. Zum Glück gibt es aber auch noch ein paar Fonts, die in allen drei großen Systemen zu über 80% vorhanden sind und nicht schon in zig Millionen Seiten eingesetzt werden.
 
  • Gefällt mir
Reaktionen: Joe
Das Problem klein = unscharf ist mir auch schon aufgefallen. Ich selbst nutze ja auch Windows. Ich wollte ein paar Fonts nutzen die etwas Retro, Fallout, Bioshock ausschauen. Meist etwas fetter und Richtung 50er 60er Jahre Werbeplakatschrift.
Grunge-Fonts sehen in kleiner Schrift richtig mies aus. Man muss wirklich viel rumprobieren mit den verschiedenen Schriften bis man mal was gefunden hat. Hat man mal was gefunden Ist dann noch der IE :) - kann kein textshadow - zeigt gern völlig andre Schriften an.

Coufin.js hatte ich schon bissel probiert scheint mir aber auch bissel unhändisch und nimmt nicht jeden Font. Fonts die keine Veränderungen zulassen gehen garnicht.

Also schau ich mir mal Google Fonts, Fontsquirrel an .. irgendwann findet man sicher irgendwas in dem Chaos was akzeptabel aussieht und Crossbrowserfähig is :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück