 Schriftgrößen Fehler / Bugs - Browserabhängig
'Kaputtes' Layout durch benutzerdefinierte Schriftgrößen, Fehler bei der relativen Größenangabe mit 100%. Hier beschreibe ich ganz kurz, welche unterschiedliche Darstellung in Browsern auftreten können und welchen Kompromiss sie zur Vermeidung eingehen könnten.
1) Fehler bei relativer Größenangabe 100% / 1em
font-size:100%; font-size:1em;
Die Schriftgrößen sollte man heute nicht mehr absolut festlegen, damit jeder Besucher die Schriftgröße seinen Anforderungen anpassen kann. Die Einheiten für die Größenangaben sollten also nicht absolute sondern relatve sein. Sie nutzen die Angaben 'em' oder '%' . Hier ein Tipp, sollten sie als Wert eine 1:1 Relation (100% oder 1em) festlegen wollen.
"1em" oder "100%"
Größenangaben: font-size:100%; oder font-size:1em;
Aber geau diese Größenangaben sollten sie nicht verwenden. Bei 100% hat zur Zeit der IE Probleme, bei 1em spinnt Opera, soweit mir bekannt ist. Lösung durch Verwendung der Angaben:
"1.01em" oder "100.01%"
Vorsicht ist lediglich bei 1:1 (100%) relativer Größe geboten. Alle anderen Werte (z.B. 80%, 120% / 0.8em, 1.2em) sind davon nicht berührt.
Diese Feststellungen sind nur für bestimmte Versionen (Releases) der Browser wahr! Um aber auf der sicheren Seite zu sein setzen sie besser die oben beschriebenen Werte ein.
Als Wert für die Schriftgröße des BODY sollte, wenn sie an 100% festhalten, die CSS-Angabe 100.01% gewählt werden (wenn man in Prozentwerten auszeichnen möchte), denn bei Angabe des Wertes 100% stellt Opera6 den Text dann sehr klein dar. Bei der Angabe von 101% hingegen vergößert Safari die Schrift unverhältnismäßig. Alle anderen Browser kümmeren sich um die kleine Differenz nicht, deshalb dieser Wert.
Analog dazu, wenn sie als Einheit nicht % sondern em wählen, sollte auf keinen Fall die Schriftgröße auf 1em gesetzt werden, da in diesem Zusammenhang der IE5 (Windows) einen verhängnisvollen Bug in der Schriftdarstellung hat.
2) Fehler durch Vererbung
Beachten sie, das durch die Vererbung von CSS-Eigenschaften die Schriftgrößen untergeordneter HTML-Elemente unerwartet sehr groß erscheinen können, wenn sie Angaben für Schriftgrößen mit Werten größer als 100% oder größer als 1em festlegen!
Die einzelnen Eigenschaften können weitervererbt werden. Das ist das Grundprinzip der Cascading Stylesheets (cascadierende Gliederung, mit Vererbung nach unten).
Beispiel:
body{
font-family:Verdana,Arial,Helvetica,
font-size:130%;
}
a{
font-size:10px;
}
td{
font-size:12px;
}
p{
font-size:130%;
}
Einige CSS-Formatierungen sind vererbbar. Legen sie für den Body die Schriftgröße mit 130% fest und für Absätze (<p>) ebenfalls Schriftgröße mit 130%, könnte die Schriftgröße für Absätze nun 169% sein, weil der Absatz (Kinderelement) ja dem Body (Elternelement) untergeordnet ist und die Eigenschaften vererbt werden. Die verebte Größe 130% würde noch einmal um weitere 30% vergrößert.
Fazit: Soll die Schriftgröße im Absatz gleich groß sein, müsste die Größenangabe für p-Elemente mit 100% festgelegt werden. Die Angabe 100% bezieht sich hier nicht mehr auf die vom Browser eingestellte Schriftgröße sonder auf die Schriftgröße des Elternelements. Bei festen Angaben (px pt) ist diese Eigenschaft unrelevant!
(Eine andere Lösung wäre es, die Vererbung bestimter Eigenschaften an Kindelemente gezielt zu steuern. Dazu wird in Style-Sheets die Angabe 'inherit' verwendet.)
3) Darstellungsfehler duch falsche Textgröße
Relative Schriftgrößenangaben in ihren CSS-Anweisungen haben einen Nachteil. Ihr punktgenau berechnetes Layout könnte durch eine benutzereingestellte, größere Schrift aufgebläht werden.
Wie sie oben bereits lasen, sollten Textformatierungen für wichtige Textbereiche einerseits nicht in fixen Punkt- oder Pixelgrößen festgelegt sein, sondern mit relativen Größenangaben wie:
font-size: 0.80em; oder
font-size: 80%;
Andererseits wäre durch benutzerdefinierte Einstellungen im Browser ihr Seitenlayout durch eine größere Schrift rasch 'zerstört'. Wie wäre es also mit einem Kompromiss?
Kompromiss und Lösung
Sie könnten für ihre Seiten Textgrößen für Menüs, Fußnoten usw. absolut (in px oder pt) festlegen. Für Textpassagen aber, für die sie Größenänderungen zulassen möchten, CSS-Formatierungen mit relativen Größenangaben (% oder em) notieren. Lesen sie dazu meine Beispielseite
 Textgrößen / Schriftgrad beinahe barrierefrei
|
Zwischenbemerkung
Zukünftige Browsergenerationen werden den Einsatz von benutzerdefinierten Style-Sheets erlauben und stetzen die Priorität dieser CSS-Angaben an höchter Stelle der Rangfolge. Damit werden dann die CSS-Angaben der Webmaster außer Kraft gesetzt! Zumindest ist das geplant.
4) Fehler durch Einstellungen im Betriebssystem
Punkt oder Pixel - Windows Me und Win95 / 98
Diese Information ist veraltet aber immer noch wahr!
Mit Style-Sheets lassen sich Formatierungen für Texte global festlegen! Manchmal macht das Ärger! Mit erstaunen mußte ich feststellen, dass mein Layout auf fremden Rechnern (ich besuche ab und an ein Internet-Cafe um das zu überprüfen), abhängig von den Einstellungen dort, schlimm aussah!
Das die beiden großen Browser die Schriften nicht gleich groß anzeigen, war mir bekannt!
Die Einstellungen kleine bzw. große Schriftarten im Betriebssystem Windows Me und Win95 / 98 war die Ursache !
| |
Während der Fehlersuche versuchte ich relative Größenangaben:
(relativ zur browsereingestellten Schriftgröße)
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.
Keine Lösung! Genauso verhielten sich Angaben wie <font size="+2">
Also endschied ich mich für eine feste Größe in Punkt. Ergebnis: keine Hilfe !
td{
font-size: 12pt;
}
|
Die Definition der Schriftgröße in Punkt (pt) ist eigentlich eine absolute Angabe! Die Windows-Einstellung kleine Schriftarten oder große Schriftarten veränderte allerdings meine HTML-Darstellung (diese bittere Erfahrung machte ich viel zu spät). Leider fand ich bisher nirgendwo einen schriftlichen Hinweis auf diese Eigenart. Testen Sie die verschiedenen Einstellungen einmal.
|
|
Wählte ich dagegen die Einstellung Pixel (px), eigentlich keine absolute Wertangabe, gab es diesen Einfluss nicht. Ich musste allerdings den Wert erhöhen: 10 pt entspricht ca. 12 px. Bitte überprüfen Sie die Darstellung in beiden großen Browsern!
|
HOME
ZURÜCK