Zahlen werden unterschiedlich groß dargestellt

M

manesco

Cadet 3rd Year

Registriert

Mai 2012

Beiträge

42

• 12. November 2014

• #1

Hallo Community,

auf einer Website, die ich derzeit gestalte, ist mir aufgefallen, dass dieselbe Schriftart und -größe in Firefox anders dargestellt wird, als in Chrome. Das ist in diesem Fall ärgerlich, da in Firefox die Zahlen unterschiedliche Höhen bekommen - bei Chrome ist alles einheitlich hoch.

Die Schriftart ist 'SourceSansProLight'. Gibt es eine Möglichkeit, die Anzeige korrekt zu haben, ohne dass der Besucher extra Einstellungen im Browser vornehmen muss?

Grüße
manesco

 

Anhänge

• 
  ff.PNG

  2,8 KB · Aufrufe: 214
• 
  chrome.PNG

  1,7 KB · Aufrufe: 212

Zuletzt bearbeitet: 12. November 2014

Snooty

Commodore

Registriert

Dez. 2012

Beiträge

4.485

• 12. November 2014

• #2

Wie ist die Schriftart denn eingebunden? Über F12 (bei Firefox ggf. noch Firebug installieren) kannst du erstmal prüfen, ob in beiden Browsern wirklich alle Schrifteigenschaften identisch sind.

 

M

manesco

Cadet 3rd Year

Ersteller dieses Themas

Registriert

Mai 2012

Beiträge

42

• 12. November 2014

• #3

Also vom CSS her sollten die gleichen Werte bedient werden - alles was darüber hinaus geht, ist über meiner Kompetenz. Ich hab mal zwei Screenshots erstellt. In der Hoffnung, dass dies die notwendigen Infos sind - magst du einmal schauen?

 

Anhänge

• 
  firefox.PNG

  6,1 KB · Aufrufe: 109
• 
  chrome.PNG

  22,2 KB · Aufrufe: 113

MaverickM

20k Fleet Admiral

Registriert

Juni 2001

Beiträge

23.364

• 13. November 2014

• #4

Das sind ja "nur" die berechneten Werte. Interesanter wären die entsprechenden CSS Definitionen, die auf diese Elemente angewendet werden.

 

M

manesco

Cadet 3rd Year

Ersteller dieses Themas

Registriert

Mai 2012

Beiträge

42

• 15. November 2014

• #5

Ich hoffe, dann hilft dir das weiter :-) :

 

Anhänge

• 
  firefox.PNG

  38 KB · Aufrufe: 119
• 
  chrome.PNG

  54,1 KB · Aufrufe: 93

T0a5tbr0t

Lieutenant

Registriert

Apr. 2012

Beiträge

581

• 15. November 2014

• #6

Font Größen werden in Browsern leicht unterschiedlich gerundet bzw. unterschiedlich gerendert. Viel kann man da nicht eingreifen.
Ich würde vielleicht mal eine Schriftgröße wählen, welche nicht auf eine Nachkommastelle in der Pixelanzahl endet.
Dann mal ein Test ohne irgendwelche CSS Eigenschaften machen, welche nicht unbedingt nötig sind. Besonders so Dinger wie "transform" können den renderweg beeinflussen.
Vllt. auch ein paar andere Schriftwarten testen, dann weiß man ob es an der Schriftart selber liegt.

 

MaverickM

20k Fleet Admiral

Registriert

Juni 2001

Beiträge

23.364

• 17. November 2014

• #7

Die Schriftgrößen sind korrekt mit em angegeben. Das sind - anders als etwa px oder pt - relative Angaben, die sich an der im Browser/System eingestellten Schriftgröße orientieren (bzw. der Größe im übergeordneten DOM Objekt). Insofern werden diese natürlich je nach Browser/System anders dargestellt. Ist also völlig normal.

Der große Vorteil ist, dass Schriften sauber skalieren, wenn sie bspw. auf Mobilgeräten angezeigt werden. Willst Du überall die exakt gleiche Schriftgröße, musst Du diese in Pixel oder Points angeben. Ich würde das aber lassen, und einfach mit der leicht unterschiedlichen Größe "leben". Das Layout der Seite sollte stets dynamisch auf das Anzeigegerät reagieren, nicht starr sein, wie bei Zeitschriften.

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 17. November 2014

• #8

Auch das leicht unterschiedliche Rundungsverhalten der verschiedenen Browser erklärt nicht, wieso die Glyphe für "4" signifikant kleiner dargestellt wird als die anderen.

 

Snooty

Commodore

Registriert

Dez. 2012

Beiträge

4.485

• 17. November 2014

• #9

Daher würd ich annehmen, dass beim Einbinden der Schrift was nicht stimmt. Zumindest sieht die Schrift bei Google Fonts bei mir in allen Browsern identisch aus. Evtl. wurde eine bestimmte Eigenschaft nicht berücksichtigt, die hier aber verlangt wird. Dann interpretiert Browser A dies evtl. anders, als Browser B bzw. unterscheiden sich die Defaultsettings.

Typecast bietet diesen Code an:

HTML:

<link href="//fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900" rel="stylesheet" type="text/css">

Snooty schrieb:

Wie ist die Schriftart denn eingebunden?

Zum Vergrößern anklicken....

 

M

manesco

Cadet 3rd Year

Ersteller dieses Themas

Registriert

Mai 2012

Beiträge

42

• 25. November 2014

• #10

Hallo Leute,

hätte ich nicht gedacht, dass es solch eine Wissenschaft ist, Schriftarten richtig in Websites zu integrieren. Aber das ist wohl der Preis der Individualität. Das Template hat auf jeden Fall die Responsive-Funktion, sodass das mit der Skalierung schon sein kann.

Ich werde mal auf den Entwickler des Templates, Rockettheme, zugehen, vielleicht wissen die mehr. Wenn es eine Lösung gibt, melde ich mich nochmal.

Grüße