Schriftart Darstellungsunterschiede

j!d · #1 (**permalink**) 08.03.2012, 16:12

Für eine Internetseite muß ich die Schriftart "Georgia" einsetzen.
Diese wird im IE und Safari wesentlich größer dargestellt als im Firefox und paßt damit nicht mehr ins vorgegebene Layout.
Das die Schriftarten in den verschiedenen Browsern nicht identisch dargestellt werden können ist mir bewußt. Gibt es trotzdem CSS Attribute oder andere Möglichkeiten dieses Problem zu minimieren?

fertone · #2 (**permalink**) 08.03.2012, 16:15

ich würde vorschlagen, die textgrößen in px anzugeben.
wie sind denn aktuel die formatierungen? hast du diese mit pt gesetzt? wenn das der fall ist, kannst du mit px immer die abmessungen in pixeln angeben, was ein einheitliches bild ergeben sollte....
MFG

Manfred62 · #3 (**permalink**) 08.03.2012, 17:28

Zitat:

Das die Schriftarten in den verschiedenen Browsern nicht identisch dargestellt werden können..

Doch, können sie (so gut wie). Stell das mal online (Freehoster?).

gato · #4 (**permalink**) 08.03.2012, 17:34

Zitat:

Zitat von j!d

Diese wird im IE und Safari wesentlich größer dargestellt als im Firefox und paßt damit nicht mehr ins vorgegebene Layout.
[...]
Gibt es trotzdem CSS Attribute oder andere Möglichkeiten dieses Problem zu minimieren?

Hast du eine Testseite parat? Mein georgia wird überall gleich groß angezeigt.
Sicher, dass keine Browsereinstellung (Zoom, Mindestschriftgröße) das Ergebnis beeinträchtigt?

Zitat:

Zitat von fertone

ich würde vorschlagen, die textgrößen in px anzugeben.
wie sind denn aktuel die formatierungen? hast du diese mit pt gesetzt? wenn das der fall ist, kannst du mit px immer die abmessungen in pixeln angeben, was ein einheitliches bild ergeben sollte....
MFG

Pixel und Punkt sind unsinnige Angaben für die Schriftgrade von Webseiten (Aunahme: Punkt bei Druckstylesheets). Die EM-Einheit oder Prozentangaben sind die bevorzugte Maßeinheit.

hubspe · #5 (**permalink**) 08.03.2012, 17:37

Zitat:

Zitat von fertone

ich würde vorschlagen, die textgrößen in px anzugeben.

sorry, aber das ist imho ganz und gar kein guter Vorschlag, weil der IE unter Standardeinstellungen den Text dann nicht mehr vergrößern kann. Außerdem haben mobile Geräte unterschiedliche Pixeldichten was dann dort zu keinem tollen Ergebnis führt.

Was spricht dagegen relative Masseinheiten wie em oder Prozent zu verwenden?
Damit bleibt der Text im IE zoombar und man kann bei z.B. 100% oder 1em sicher sein, dass die Standardschriftgröße des mobilen Gerätes genommen wird.

edit.....zu langsam!

cebito · #6 (**permalink**) 08.03.2012, 18:45

Zitat:

Zitat von j!d

und paßt damit nicht mehr ins vorgegebene Layout.

Dann stimmt was mit deinem Layout nicht. Dieses sollte sich dem Content anpassen, nicht umgekehrt

mermshaus · #7 (**permalink**) 09.03.2012, 08:10

Wenn die unterschiedliche Pixeldichte verschiedener Geräte Pixel zu einer schlechten Einheit für Schriftgröße macht, heißt das im Grunde, dass Pixel eine schlechte Einheit für praktisch alles ist.

HTML-Code:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Pixel Test</title>
        <style>
/*<![CDATA[*/
.box { float: left; border: 1px solid red; margin: 10px; }
.boxNormalDpi          { width: 400px; }
.boxFourTimesNormalDpi { width: 100px; }
.boxFourTimesNormalDpi img { width: 55px; }
/*]]>*/
        </style>
    </head>

    <body>

        <div class="box boxNormalDpi">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Westfalenstadion_070_17.jpg/220px-Westfalenstadion_070_17.jpg">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut nunc metus. Donec sapien leo, hendrerit non vehicula et, porttitor et sapien. Donec hendrerit, ipsum fringilla sodales venenatis, tellus eros luctus dui, id feugiat arcu risus vitae diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non turpis ut lacus sodales tristique. Etiam ut eros vitae mauris tempus scelerisque. Etiam iaculis dui in lacus congue venenatis ultrices elit rutrum. Proin consequat est eu metus iaculis gravida. Nulla nec augue ante. Praesent pulvinar facilisis rutrum. Nunc non ipsum sit amet tortor porta egestas. Curabitur malesuada aliquet ultricies. Maecenas consectetur turpis vitae nulla volutpat lacinia. Proin posuere mattis iaculis.
        </div>

        <div class="box boxFourTimesNormalDpi">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Westfalenstadion_070_17.jpg/220px-Westfalenstadion_070_17.jpg">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut nunc metus. Donec sapien leo, hendrerit non vehicula et, porttitor et sapien. Donec hendrerit, ipsum fringilla sodales venenatis, tellus eros luctus dui, id feugiat arcu risus vitae diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed non turpis ut lacus sodales tristique. Etiam ut eros vitae mauris tempus scelerisque. Etiam iaculis dui in lacus congue venenatis ultrices elit rutrum. Proin consequat est eu metus iaculis gravida. Nulla nec augue ante. Praesent pulvinar facilisis rutrum. Nunc non ipsum sit amet tortor porta egestas. Curabitur malesuada aliquet ultricies. Maecenas consectetur turpis vitae nulla volutpat lacinia. Proin posuere mattis iaculis.
        </div>

    </body>

</html>

jsFiddle ist leider gerade down.

Edit: In dem Beispiel habe ich die unterschiedliche Pixeldichte pro Display durch das Teilen aller Pixelangaben durch 4 simuliert. Die Schriftgröße soll relativ angegeben sein (1em), verändert sich also nicht auf den beiden „Displays“.

gato · #8 (**permalink**) 09.03.2012, 16:02

Zitat:

Zitat von mermshaus

Wenn die unterschiedliche Pixeldichte verschiedener Geräte Pixel zu einer schlechten Einheit für Schriftgröße macht, heißt das im Grunde, dass Pixel eine schlechte Einheit für praktisch alles ist.

Ich verwende Pixelangaben bei Rahmen, da diese üblicherweise nicht sehr aufdringlich sind.

Zitat:

Zitat von mermshaus

Edit: In dem Beispiel habe ich die unterschiedliche Pixeldichte pro Display durch das Teilen aller Pixelangaben durch 4 simuliert. Die Schriftgröße soll relativ angegeben sein (1em), verändert sich also nicht auf den beiden „Displays“.

Du vergisst dabei, dass Em letztlich auch wieder in Pixel umgerechnet werden. CSS kennt keine geräteunabhängigen Maßeinheiten (Absolute Maßeinheiten sollten darüber nicht hinwegtäuschen).

mermshaus · #9 (**permalink**) 10.03.2012, 09:21

Mein Gedanke war, dass das Gerät die grundlegende Schriftgröße vorgibt und darüber indirekt einen passenden Bezugswert für em definiert.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Schriftart wird in IE7 nicht geladen	Eppi	CSS	4	07.07.2011 09:59
Schriftart Arial Black unter Windows XP/7	marpie	CSS	4	01.08.2010 16:30
Schriftart	skriptkiddie	CSS	7	20.08.2009 13:33
coole Schriftart, auch für kommerzielle Seite??	Iago	Grafik, Design, Typografie	5	06.08.2009 00:10
Schriftart welche auf jedem System vertreten ist?	Korasu	CSS	4	05.10.2008 15:19