nicht angemeldet
Auge
Auge
Matthias Apsel
Gunnar Bittersmann
Felix Riesterer
Gunnar Bittersmann
Hallo!
Ich erstelle gerade eine kleine Website und musste soeben etwas fesstellen.
Die Seite habe ich mit HTML und CSS selbst aufgebaut und habe in die CSS Datei über Google Fonts per "@import" zwei Schriftarten in die Seite eingebunden.
Der CSS Code zum Text sieht folgendermaßen aus:
#logo1 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
font-family: 'Six Caps';
font-size: 50px;
height: 50px;
letter-spacing: 3px;
line-height: 55px;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}
Derzeit habe ich die Seite nur im Firefox betrachtet, schaue ich die selbe Seite allerdings unter Safari an, dann muss ich feststellen, dass die Schriftart selbst um einiges "Dünner" dargestellt wird als im Firefox. Dies ist auch bei der anderen Schriftart, welche auch aus Google Fonts ist, der Fall.
Wisst Ihr ob das "normal" ist oder ob man dagegen irgendetwas machen kann.
Das Problem ist nämlich, dass ich zwei Texte untereinander Darstelle (Name oben und darunter die Internetadresse) welche ich per "letter-spacing" auf gleiche Breite gebracht habe. Dies würde unter Firefox jetzt genau passen, allerdings in Safari nicht mehr.
lg.
Manuel
Hi!
Der Effekt ist völlig normal. Browser nutzen verschiedenene Engines zum Rendern der Seiten. Eine hundertprozentige Gleichheit wirst Du kaum erreichen. Das hat auch überhaupt nichts damit zu tun, ob Du eine Schrift per CSS einbindest oder Systemschriftarten verwendest.
Hallo
@Felix Riesterer:
Ich habe den "@import" Teil nur hier weggelassen. In der CSS ist er natürlich vorhanden. Die Schrift wird ja auch angezeigt, nur eben in jedem Browser anders. Man könnte sagen, dass das "letter-spacing" jeder Browser unterschiedlich macht, da die Abstände von Browser zu Browser unterschiedlich sind.
@Steel:
Das habe ich mir auch schon gedacht, dass es an den unterschiedlichen Engines liegt, jedoch war ich mir nicht sicher, ob es nicht vielleicht doch irgendeine Möglichkeit gibt, das ganze so zu "schreiben" dass es in den unterschiedlichen Browsern gleich angezeigt wird.
Da wird mir dann, wenn ich es wirklich überall gleich haben will, nur eine Lösung bleiben. Das ganze Logo als ".PNG" Bild speichern und einfügen statt dem "normalen" Text.
Da es sich hierbei ja um ein Joomla Template handelt und ich schon etwas mit Ihnhalt experimentiert habe ist mir aber außerdem noch aufgefallen, dass sich gewisse Inhalte auch verschieben oder anders dargestellt werden.
So sind zum Beispiel im Firefox bei der Phoca Gallery in der Kategory- oder Bildübersicht 5 Bilder in einer Zeile / Reihe und im Safari Browser nur 4 Bilder in einer Reihe.
LG.
Manuel
Hallo
Das habe ich mir auch schon gedacht, dass es an den unterschiedlichen Engines liegt, jedoch war ich mir nicht sicher, ob es nicht vielleicht doch irgendeine Möglichkeit gibt, das ganze so zu "schreiben" dass es in den unterschiedlichen Browsern gleich angezeigt wird.
Da wird mir dann, wenn ich es wirklich überall gleich haben will, nur eine Lösung bleiben. Das ganze Logo als ".PNG" Bild speichern und einfügen statt dem "normalen" Text.
Da es sich hierbei ja um ein Joomla Template handelt und ich schon etwas mit Ihnhalt experimentiert habe ist mir aber außerdem noch aufgefallen, dass sich gewisse Inhalte auch verschieben oder anders dargestellt werden.
Hör auf, dich in Kleinigkeiten zu verlieren. Der Einzige [1], der deine Seite mit verschiedenen Browsern aufruft und dem folglich die Unterschiede in's Auge fallen bist du. Alle Anderen [1] benutzen ihren einen Browser und sehen die Seite so, wie sie in dem Programm dargestellt wird. Immer.
[1] statistisch gesehen
Tschö, Auge
Hello,
Hör auf, dich in Kleinigkeiten zu verlieren. Der Einzige [1], der deine Seite mit verschiedenen Browsern aufruft und dem folglich die Unterschiede in's Auge fallen bist du. Alle Anderen [1] benutzen ihren einen Browser und sehen die Seite so, wie sie in dem Programm dargestellt wird. Immer.
Da stimme ich Dir in einem Punkt zu. Das ist eine interessante und durchaus untersuchenswerte These. Das hieße dann für den "One Browser Man", dass er die Seite im WC-Fall immer gleich beschissen sieht (Oh, das muss ich mir merken *g*)
Ich würde aber vermuten, dass die Leute zum größten Teil mindestens zwei Browser haben:
Desktop
Lappi
Lappi
Smartphone
Desktop
Tablet-Phone
oder sogar drei. Und dann ärgern sie sich, wenn sie ihren Freunden das zuhause entdeckte unterwegs oder am Stammtisch nicht zeigen können...
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Moin
oder sogar drei. Und dann ärgern sie sich, wenn sie ihren Freunden das zuhause entdeckte unterwegs oder am Stammtisch nicht zeigen können...
Da die meisten mobilen Geräte aber inzwischen eine Funktion "Desktop-Ansicht" für Webseiten enthalten, kann dies vernachlässigt werden.
Desktop und mobile Geräte nähern sich immer weiter an.
Gruß Bobby
Moin!
Da die meisten mobilen Geräte aber inzwischen eine Funktion "Desktop-Ansicht" für Webseiten enthalten, kann dies vernachlässigt werden.
Die kommt aber nur bei entsprechender Umsetzung der Website zum Tragen. sprich setzt (derzeit noch) serverseitiges UA-Sniffing voraus (da der Unterschied nur im gesendeten UA-String des Browsers besteht - Stichworte: "Viewport Meta-Tag", "Media Queries", "@viewport").
Desktop und mobile Geräte nähern sich immer weiter an.
Leistungsmäßig vielleicht, aber in punkto Displaygröße sind da gewisse bauartbedingte Schwierigkeiten vorhanden ...! ;-)
Gruß Gunther
Moin
Leistungsmäßig vielleicht, aber in punkto Displaygröße sind da gewisse bauartbedingte Schwierigkeiten vorhanden ...! ;-)
Ich persönlich schaue mir lieber eine Webseite auch auf dem Smartphone in der Desktopversion an anstatt mich mit irgendwelchen abgespeckten mobilen versionen herumzuärgern... Oftmals fehlen Funktionalitäten oder es ist einfach unübersichtlich. So nutze ich lieber den Zoom mit Daumen und Zeigefinger... ;)
Gruß Bobby
Moin!
Ich persönlich schaue mir lieber eine Webseite auch auf dem Smartphone in der Desktopversion an
Das kann ich bei diversen Seiten gut verstehen. Da geht es mir genauso ...! ;-)
anstatt mich mit irgendwelchen abgespeckten mobilen versionen herumzuärgern... Oftmals fehlen Funktionalitäten oder es ist einfach unübersichtlich.
Und genau das, sollte ja nicht der Fall sein! Im Gegenteil sollte eine Seite die "andere" Benutzung auf einem Samrtphone (und zum Teil auch Tablets) entsprechend unterstützen und auch in punkto Inhalt und Übersichtlichkeit auf die Gegebenheiten abgestimmt sein.
Leider hapert es da momentan noch bei vielen Seiten.
Aber imho alles nur eine Frage der Zeit. ;-)
Gruß Gunther
Hallo
Ich persönlich schaue mir lieber eine Webseite auch auf dem Smartphone in der Desktopversion an anstatt mich mit irgendwelchen abgespeckten mobilen versionen herumzuärgern... Oftmals fehlen Funktionalitäten …
Dass viele Seiten abgespeckt werden, ist eine Sache. Man kann an der Stelle natürlich diskutieren, wo das sinnvolle Weglassen wegen Datenvolumen und nicht wichtiger Zier aufhören und das Vorenthalten von Inhalten beginnt. Für unterschiedliche Geräteklassen eine unterschiedliche Darstellung z.B. schon wegen unterschiedlicher Bedienkonzepte zu wählen, halte ich dennoch für sinnvoll.
… oder es ist einfach unübersichtlich. So nutze ich lieber den Zoom mit Daumen und Zeigefinger... ;)
Och nöö, mich mit der nun (typischerweise) viel zu kleinen Schrift rumärgern, Textabschnitt für Textabschnitt zu suchen und zu zoomen, nee, das muss ich nicht haben (wenn's nicht muss).
Tschö, Auge
Om nah hoo pez nyeetz, Tom!
Ich würde aber vermuten, dass die Leute zum größten Teil mindestens zwei Browser haben:
Desktop
Lappi
Lappi
Smartphone
Desktop
Tablet-Phone
oder sogar drei. Und dann ärgern sie sich, wenn sie ihren Freunden das zuhause entdeckte unterwegs oder am Stammtisch nicht zeigen können...
Dort fallen die ungewollten und unwichtigen kosmetischen Unterschiede aber auch nicht auf. Dafür kommen die per media-queries explizit gesetzten Unterschiede zum Tragen.
Matthias
@@Tom:
nuqneH
im WC-Fall immer gleich beschissen sieht
Über den Ausdruck und das Wortspiel kann man lächeln. Der Rest deines Postings iat lächerlich.
Und dann ärgern sie sich, wenn sie ihren Freunden das zuhause entdeckte unterwegs oder am Stammtisch nicht zeigen können...
Wegen geringfügig anderer Strichstärke sollte eine Seite nicht mehr vorzeigbar sein? Deine Argumentation ist wirklich Stammtischniveau.
Qapla'
Hello,
im WC-Fall immer gleich beschissen sieht
Über den Ausdruck und das Wortspiel kann man lächeln. Der Rest deines Postings iat lächerlich.
Und dann ärgern sie sich, wenn sie ihren Freunden das zuhause entdeckte unterwegs oder am Stammtisch nicht zeigen können...
Wegen geringfügig anderer Strichstärke sollte eine Seite nicht mehr vorzeigbar sein? Deine Argumentation ist wirklich Stammtischniveau.
Wo steht bei mir, dass sich Unterschiede nur auf Strichstärken beschränken müssen. Ich habe auf "unterschiedliche" Broswer bezug genommen.
Dein Parser stand jetzt eben bestimmt auch auf "Simple Mode"?
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Lieber Manuelw,
und habe in die CSS Datei über Google Fonts per "@import" zwei Schriftarten in die Seite eingebunden. [...]
#logo1 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
font-family: 'Six Caps';
font-size: 50px;
height: 50px;
letter-spacing: 3px;
line-height: 55px;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}
wo? Die @import-Anweisung sehe ich nirgends. Kann es sein, dass Du den notwendigen Code-Ausschnitt hier weg gelassen hast? Alleine die Eigenschaft `font-family: 'Six Caps'`{:.language-css} hat noch keine Auswirkung auf die Schrift. Sollte der Browser im System keine passende Schriftart finden, so nutzt er eine Ersatzschriftart - wobei hier auch eine generische Schriftart (z.B. "sans-serif" oder "serif") fehlt, um das Ersatzverhalten besser zu steuern.
Je mehr ein Browser raten muss, wie etwas aussehen soll, desto größer sind die visuellen Abweichungen in verschiedenen Browsern.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
@@Manuelw:
nuqneH
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
Das dürfte es sein. Der Effekt dürfte bei heller Schrift auf dunklem Grund stärker sein als bei dunkel auf hell.
"Subpixel rendering" und "anti-aliasing" sind deine Suchbegriffe. Damit dürftest du auf sowas wie '-webkit-font-smoothing: antialiased' stoßen.
Qapla'